本文总结CSS3中两个用来做动画的属性,一个是transition
,另一个是animation
。
差异比较
CSS3 |
差异 |
transition |
在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画。 |
|
常用语鼠标事件(:hover 、active 、:focus 、:click )或键盘输入时触发 |
|
需要事件触发,无法在网页加载时自动发生。一次性,不能重复发生,除非一再触发。 |
|
只能定义开始状态和结束状态,不能定义中间状态。 |
animation |
可以自行写动画开始、进行间、结束时各阶段的变化,适合用来做较细微的动画表现。需要明确的指定关键帧(@keyframe )的参数。 |
|
网页加载时会直接执行,可以自行控制各阶段动画的变化 |
animation
和transition
最大的不同在于transition
是当参数改变时触发,而animation
则是直接就