CSS3---animation

1.浏览器支持情况

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

2.基本用法

animation:name duration timing-function delay iteration-countdirection;

属性

animation 属性是一个简写属性，用于设置八个动画属性：

animation-name  规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间，单位秒或毫秒，默认是0

animation-timing-function 规定动画的速度曲线

animation-delay  规定在动画开始之前的延迟。

animation-iteration-count  规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

animation-play-state 控制动画的暂停处理

animation-fill-mode

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

语法

1. animation-name：keyframename|none;

2. animation-duration:time;

3. animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

        linear 动画从头到尾的速度是相同的。

        ease  默认。动画以低速开始，然后加快，在结束前变慢。

        ease-in 动画以低速开始。

        ease-out 动画以低速结束。

       ease-in-out  动画以低速开始和结束。

        cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4. animation-delay：time;

5. animation-iteration-count:n | infinite

          n 定义动画播放次数的数值。

          infinite  规定动画应该无限次播放。

6. animation-direction:normal | alternate;

          normal 默认值。动画应该正常播放。

          alternate 动画应该轮流反向播放。

7. animation-play-state: paused