css3 animation 动画属性简介
animation 动画属性介绍
animation 属性是一个简写属性，用于设置动画属性：
1. animation-name----规定需要绑定到选择器的 keyframe 名称。
语法：animation-name: keyframename|none；
Keyframename：规定需要绑定到选择器的 keyframe 的名称。
None： 规定无动画效果（可用于覆盖来自级联的动画）。
例如：
{
-webkit-animation-name: my_animation;
-moz-animation-name：my_animation;
-ms-animation-name：my_animation;
-o-animation-name: my_animation;
animation-name: my_animation;
}
@-webkit-keyframes my_animation{}
@-moz-keyframes my_animation{}
@-ms-keyframes my_animation{}
@-o-keyframes my_animation{}
@keyframes my_animation{}
2. animation-duration----规定完成动画所花费的时间，以秒或毫秒计。
语法：animation-duration: time;
time ： 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。
例如：
{
-webkit-animation-duration: 2s;
-moz-animation-duration：2s;
-ms-animation-duration：2s;
-o-animation-duration: 2s;
animation--duration: 2s;
}
3. animation-timing-function----规定动画的速度曲线
语法：animation-timing-function: value;
Value值:
linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out ：动画以低速结束。
ease-in-out：动画以低速开始和结束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
例如：
{animation-timing-function:linear;}
{animation-timing-function:ease;}
{animation-timing-function:ease-in;}
{animation-timing-function:ease-out;}
{animation-timing-function:ease-in-out;}
4. animation-delay----规定在动画开始之前的延迟
语法：animation-delay: time;
Time值：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
{
animation-delay:2s;
-webkit-animation-delay:2s;
}
5. animation-iteration-count----规定动画应该播放的次数
语法：animation-iteration-count: n|infinite;
n：定义动画播放次数的数值。
infinite：规定动画应该无限次播放。默认值为：1。
示例：
{
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
6. animation-direction----规定是否应该轮流反向播放动画
语法：animation-direction: normal|alternate;
normal：默认值。动画应该正常播放。
alternate ：动画应该轮流反向播放。
注释：如果把动画设置为只播放一次，则该属性没有效果。
示例：
{
animation-direction:alternate;
-webkit-animation-direction:alternate;
}
7. animation-play-state 属性规定动画正在运行还是暂停
语法：animation-play-state: paused|running;
paused：规定动画已暂停。
running：规定动画正在播放。
注释：可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
示例：
{
animation-play-state:running;
-webkit-animation-play-state:running;
}
8. animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见
语法：animation-fill-mode : none | forwards | backwards | both;
none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both ：向前和向后填充模式都被应用。
