animation和transition

1.animation

• animation与transition有几个相同的属性，duration、timing-function、delay；
• animation-name：animation需要指定动画的名字，这个是用来在@keyframes中指定执行动画的样式；
• animation-duration：动画的执行时间。单位为s(秒)；
• animation-timing-function：动画类型，取值与transition相同；
• animation-delay：动画延迟时间，单位为s(秒)；
• animation-iteration-count：动画执行的次数，这个属性就克服了transition局限中的第二条，取值可以是数字，指定具体循环几次，也可以设置关键字“infinite”无限循环；
• animation-direction：动画在循环执行时是否反方向，取值“normal”正常方向、“alternate”正常与反向交替；
• animation-play-state：设置执行中动画的状态，取值“running”、“paused”；
• animation-fill-mode：设置动画执行时间之外的状态，取值“none”（默认，不设置）、“forwards”(动画结束时的状态)、“backwards”(动画开始时的状态)、“both”(开始或结束时的状态)。

---

2.transition

• transition-property：参与过渡的属性，比如height、width等CSS样式，所有样式用关键字“all”，没有样式需要过渡使用”none”；
• transition-duration：过渡持续的时间，单位是s(秒)，比如width从100px过渡到200px排序需要的时间；
• transition-timing-function：过渡的动画类型，有以下几种取值。
• linear：线性过渡，等同于贝塞尔曲线（0.0,0.0,1.0,1.0）；
• ease：平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）；
• ease-in：由慢到快，等同于贝塞尔曲线（0.42,0,1.0,1.0）；
• ease-out：由快到慢，等同于贝塞尔曲线（0,0,0.58,1.0）；
• ease-in-out：由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1.0）；
• cubic-bezIEr(number,number,number,number)：特定的贝塞尔曲线类型，4个数值需在[0,1]区间内；
• transition-delay：动画延迟执行的时间；
• transition同background属性一样，有缩写和拆分两种方式，就是说，你可以把每个属性都加到transition后。

缩写如：transition:border-color .5s ease-in .1s;

也可以把这些属性拆分，分别设置在这个属性之后，上边的缩写拆分后如下：

• transition-property:border-color;
• transition-duration:.5s;
• transition-timing-function:ease-in;
• transition-delay:.1s

如果需要对多个样式设置过渡动画，可以用逗号分开。
缩写如：

• transition:border-color .5s ease-in .1s,color .3s ease .2s;

  拆分写法如：

• transition-property:border-color,color;

• transition-duration:.5s,.3s;
• transition-timing-function:ease-in,ease;
• transition-delay:.1s,.2s;

在拆分写法中，如果某个属性是多组共用的，则不需要分别设置，比如：transition-duration:.5s,.5s;—>transition-duration:.5s;

但是transition有几个很大的局限：
（1）transition需要事件触发，所以没法再网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说，只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。所以就诞生了animation属性，相对transition略显复杂，但是功能更强大。