css3 animation属性

今天说一说 CSS3 标准的动画属性：

本文是基于w3cschool在线教程的官网完成的。先贴出官网上给出的实例代码和运行结果的截图

示例代码

运行结果（动图）

语法：

animation：name duration timing-function delay iteration-count direction

看一下各个参数的使用方法：

1.name：规定需要绑定到选择器的 keyframe 名称，必须与规则@keyframe配合使用

animation-name

2.duration：规定完成动画所花费的时间，以秒或者毫秒计数

animation-duration：5s完成

3.timing-function：规定动画的速度曲线

3-1.linear：动画从头到尾速度是相同的

3-2.ease：是默认的。动画从低速开始，然后加速，在结束前变慢

3-3.ease-in：动画从低速开始

3-4.ease-out：动画以低速结束

3-5.ease-in-out：动画以低速开始和结束

3-6.cubic-bezier(n,n,n,n)：也叫贝塞尔曲线，在cubic-bezier函数中自己的值。想要搞清楚这个方法，首先要知道贝塞尔曲线的使用方法

4.delay：规定在动画开始之前的延迟时间

延迟时间

5.iteration-count：规定动画应该播放的次数。

它的值可以为 infinite :表示无限循环。 一个number：表示循环的次数

无限循环

循环3次

6.direction：规定是否应该轮流反向播放动画。它的值可以为：

normal : 正常方向（默认）

reverse : 反方向运行

alternate : 动画先正常运行再反方向运行，并持续交替运行

alternate-reverse : 动画先反运行再正方向运行，并持续交替运动

看不出效果，下面给链接吧

http://www.w3school.com.cn/tiy/t.asp?f=css3_animation-direction

上面就是该官网上面举的实例。当然这里面其实不止6个。遇到的时候在补充总结吧。

另外除了上面直接使用 animation 的方法之外还可以使用下面这个方法：

上面的两个效果是相同的，都是延迟3秒之后开始移动。除了上面的delay方法，对于上面提到的6个参数都可以使用这样的方法来实现同样的效果。

希望对读者有所帮助！