归纳CSS3的动画属性

（代码最下，先了解下属性）

[email protected]

用于来规定动画；
**

2.animation

这个是所有动画属性的简写模式，除了一个 animation-play-state 属性；
**

3.animation-name

顾名思义，这个是用来规定动画的名称的
**

4.animation-duration

这个是用来规定动画完成一次所要花的时间，默认的是0；
**

5.animation-timing-function

这个是用来规定在进行动画时的速度，默认的是ease（动画一开始慢速，中间加快，结束前再慢速）

其他值
①linear :动画从头到尾的速度都是一样的，也就是我们说的匀速。

②ease-in :动画以低速开始（可以理解成加速）。

③ease-out :动画以低速结束（可以理解成减速）。

④ease-in-out :动画以低速开始再以低速结束（可以理解成先加速再减速，其实和默认值没什么区别）。

⑤cubic-bezier(n,n,n,n) :在 cubic-bezier 函数中可以自己去规定自己的值。其中n的取值范围是0-1。
**

6.animation-fill-mode

这个是用来规定动画没有进行时（就是说动画播放完了，或者时动画在一开始有个延迟播放的时候），动画元素所要运用的样式；

其值有
①none ：默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。

②forwards ：在动画执行完成后（由 动画播放的次数 决定），动画将应用该属性值，目标元素应用某些样式。

③backwards : 在动画执行之前（与 动画延迟播放的时间有关），动画将应用该属性值，目标元素应用某些样式。

④both : 动画在动画执行之前和之后会应用某些样式到目标元素。

⑤initial 设置该属性为它的默认值，就是设置了这个相当于设置了none。

⑥inherit 从父元素继承该属性。
**

7.animation-delay

这个时规定动画何时开始（也就是我们说的延迟播放）。默认是 0。
**

8.animation-iteration-count

这个是规定动画的播放次数。默认是 1。

其他值
infinite 指定动画应该播放无限次
**

9.animation-direction

如果动画定义了animation-iteration-count,那么这个就是规定动画在紧接着下次时是否会逆向播放
，默认值是normal(规定动画正常播放)；
**
其他值
①reverse：规定动画会逆向的播放；

②alternate ： 规定动画在奇数次是正向的播放，在偶数次的是逆向播放；

③alternate-reverse：与alternate正好相反；

⑤initial 设置该属性为它的默认值，就是设置了这个相当于设置了normal。

⑥inherit 从父元素继承该属性。

10.animation-play-state

这个是规定动画是运行动画还是暂停动画（其实平常应该用的比较少，个人感觉有点鸡肋）

属性值
①paused :规定动画暂停

②running :规定运行动画（默认值）

div
{
	width:100px;
	height:100px;
	position:relative;
	animation-name:myname;
	animation-duration:10s;
	animation-timing-function:ease-in;
	animation-delay:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	/* 考虑浏览器的兼容问题需要加 */
	-webkit-animation-name:myname;
	-webkit-animation-duration:10s;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-delay:1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
}
/***以上的简写*/
div
{
    animation: myname 10s ease-in 1s infinite alternate;
   /* 考虑浏览器的兼容问题需要加 */
    -webkit-animation: myname 10s ease-in 1s infinite alternate;
}

/*当动画比较简单时候，推荐使用from和to*/
@keyframes myname
{
	0%   { left:0px; top:0px;}
	25%  { left:400px; top:0px;}
	50%  { left:400px; top:400px;}
	75%  { left:0px; top:400px;}
	100% { left:0px; top:0px;}
}
/* 考虑浏览器的兼容问题需要加 */
@-webkit-keyframes myname 
{
	0%   { left:0px; top:0px;}
	25%  { left:400px; top:0px;}
	50%  { left:400px; top:400px;}
	75%  { left:0px; top:400px;}
	100% { left:0px; top:0px;}
}