animation的属性值

**

CSS3 animation动画

原理：逐帧动画。会把整个运动过程，划分成100份。它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

最常用的几种属性有以下几种：

1.animation-name : 设置动画的名称 (自定义的)，就是规定需要绑定到选择器的 keyframe 名称

必须存在，默认值为none,表示没有动画。
@keyframes 动画的名字 {
    from {background: red;}
	to {background: yellow;}
}
@keyframes 动画的名字 {
    0% {background: red;}
	100% {background: yellow;}
}
from : 起点位置 , 等价于 0%  
to : 终点位置 ，等价于 100%
注：默认情况下，元素运动完毕后，会停到起始位置。

2.animation-duration : 动画的持续时间，以秒或毫秒计

3.animation-delay : 动画开始的延迟时间

4.animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数

5.animation-timing-function : 动画的运动形式

值	描述
linear	动画从头到尾的速度是相同的
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

6.animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见

 none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%的运动形式在延迟后生效
 backwards  :  在延迟的情况下，让0%的运动形式在延迟前生效
 forwards  :  在运动结束的之后，停到结束位置
 both  :  backwards和forwards同时生效

7.animation-direction : 定义是否应该轮流反向播放动画。

 alternate  :  一次正向(0%~100%)，一次反向(100%~0%)
 reverse : 永远都是反向 , 从100%~0%
 normal (默认值) : 永远都是正向 , 从0%~100%

animation属性在书写通常合并在一起，除非需要单独设置的属性值，animation属性的简写形式为：
animation:code 2s 2s linear infinite alternate forwards;
用法及作用如下：

执行结果：
1.box2一直在box1内部
2.在0%运动形式延迟前，box2背景变为蓝色
3.运动时间2秒，延迟3秒，沿着X轴无限循环来回匀速移动300px。向右运动背景 逐渐变为红色，向左逐渐变为红色
4.其中myMove是属性名称，2s 运动时间、3s延迟时间

**
HTML5逆战班2002期——animation动画总结