CSS3动画属性

通过css3,我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。

一、animation和transition的比较

transition:过渡，需要事件进行触发才会改变其css属性。
animation:动画，不需要进行触发，调用关键帧即可改变元素css属性。

二、制定关键帧 @keyframes

注：目前浏览器都不支持 @keyframes 规则。Firefox支持替代的 @-moz-keyframes 规则。
Opera支持替代的 @-o-keyframes 规则。Safari和Chrome支持替代的 @-webkit-keyframes 规则。

三、animation复合属性

1. animation-name 关键帧名称
2. animation-duration 动画的持续时间
3. animation-timing-function 动画运动的类型
   属性值
   linear：匀速过渡。
   ease：平滑过渡。
   ease-in：由慢到快。
   ease-out：由快到慢。
   step-start：没有动画中间过渡效果，直接跳到下一帧开始的地方。
4. animation-delay 动画延迟的时间
5. animation-iteration-count 动画的循环次数
6. animation-direction 运动方向
   属性值
   reverse：反向运动。
   normal：正常方向。
   alternate：先正向后反向，交替运行。
   alternate-reverse：先反向后正向，交替运行。
7. animation-play-state：动画状态
   属性值
   pushed：暂停
   running：运动

简写形式：

案例：玫瑰扩散

部分代码如下：
关键帧分别设置了透明度0-1；设置缩放从1-4。