CSS3动画

CSS3 animations

一个完整的CSS animiations由两部分构成：
(1)一组定义的动画关键帧——@keyframes规则
(2)描述该动画的CSS声明——animation属性

@keyframes规则

-在CSS3中使用@keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。
-@keyframes规则的语法格式如下所示：

@keyframes animationname{
	keyframes-selector{css-styles;}
}

释：animationname表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
keyframes-selector是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。

animation属性

animation属性用于描述动画的CSS声明，包括制定具体动画以及动画时长等行为。

一、animation属性（复合属性）的基本语法如下所示：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

与transtion类似，animation也是一个复合属性，以上参数分别对应8个子属性。

二、animation属性（子属性）
1、animation-name 规定@keyframe动画的名称。
属性值：
keyframename 规定需要绑定到选择器的keyframe的名称。
none 规定无动画效果（可用于覆盖来自级联的动画）。

2、animation-duration 规定动画完成一个周期所花费时间。

3、animation-timing-function 规定动画的速度曲线。
属性值：
linear 动画从头到尾的速度是相同的。
ease 默认值。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier（n,n,n,n）在cubic-bezier函数中自己的值。可能的值是从0到1的数值

4、animation-iteration-count 规定动画被
属性值：
n 定义动画播放次数的数值，默认是1。
infinite 规定动画应该无限制播放。

5、animation-direction 规定动画是否在下一周期逆向播放。
属性值：
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。

6、animation-play-state 规定动画是否正在运行或暂停。
属性值：
paused 规定动画已暂停。
running 默认值，规定动画正在播放。

7、animation-play-state 规定动画是否正在运行或暂停。
属性值：
none 不改变默认行为。
forwards 动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和后填充模式都被应用。