transition动画转换的过程

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

一。 opacity:x

改变颜色透明度

  div{                                                                  
  width: 200px;                                                            
 height: 200px;                                                           
 background: rgba(255,0,0,.5); 
  background: red;                                                       
 opacity:x x值为0~1，值越小越透明 opacity:0.4;  在ie低版本的不支持 
 ie低版本支持filter:alpha(opacity=x)                                   
filter:alpha(opacity=x) x值为0~100，值越小越透明 filter:alpha(opacity=40);    

二。transition

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

①。transition-property 过渡或动态模拟的CSS属性

指定的CSS属性（width、height、background-color属性等） all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

②。transition-duration 完成过渡所需要的时间

定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

③。transition-timing-function 指定过渡函数

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

④。transition-delay 过渡开始出现的延迟时间

多少时间之后开始出现效果转换，单位为秒（s)

⑤。linear 规定以相同速度开始至结束的过渡效果

⑥。ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

⑦。ease-in 规定以慢速开始的过渡效果 (一开始会很慢 后面快结束的时候会加快)

⑧。ease-out 规定以慢速结束的过渡效果 (一开始会很快 后面快结束的时候会变慢)

⑨。ease-in-out 规定以慢速开始和结束的过渡效果