定义一个简单的CSS3动画

通过CSS3，我们无需javascript也可以创建一些简易的动画效果，下面我们来看一下相关的属性和规则。

CSS3 animation属性

通过animation属性，我们可以给元素附加动画效果及样式，下表列出了animation属性的值：

属性	功能
animation-name	定义动画的名称
animation-duration	定义动画运行一个周期花费的时间
animation-timing-function	定义动画的速度曲线
animation-delay	定义动画开始运行前的延迟时间
animation-iteration-count	定义动画被播放的次数
animation-direction	定义是否应该轮流反向播放动画
animation-fill-mode	定义动画在播放之前或之后，其动画效果是否可见

animation-name：

自定义动画名称，若值为none，则规定无动画效果。

animation-duration：

该属性单位为s或者ms，默认值为0，即无动画效果。

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

animation-timing-function：

具体值有：

• linear： 规定动画从开始到结束做匀速运动。
• ease（默认属性）： 规定动画以低速开始运动，然后加快，在结束前变慢。
• ease-in： 规定动画以低速开始运动。
• ease-out： 规定动画以低速结束运动。
• ease-in-out： 规定动画以低速开始和结束运动。
• cubic-bezier(n,n,n,n)： 贝赛尔曲线，我们在 cubic-bezier 函数中自定义它的值。可能的值是从 0 到 1 的数值。

animation-delay：

动画总是在经过animation-delay规定的时间过后才开始运动，其值同样以s或ms计，默认值为0。

注意：animation-delay允许负值，-2s 使动画立即开始，但跳过animation-duration时间的 2 秒进入动画。

animation-iteration-count：

其值为n或infinite，n为动画播放的次数值，infinite规定动画应该无限次的播放。