一、animation 概念

animation 属性是一个简写属性，用于设置六个动画属性：

　　1）animation-name，规定需要绑定到选择器的 keyframe 名称。

　　2）animation-duration，规定完成动画所花费的时间，以秒或毫秒计默认是0表示无动画，单位可以设s秒或ms毫秒。

　　3）animation-timing-function，规定动画的速度曲线，默认值ease，可以设linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。

　　4）animation-delay，规定在动画开始之前的延迟，默认值是0，表示不延迟，立即播放动画。单位是s秒或ms毫秒。允许设负时间，意思是让动画动作从该时间点开始启动，之前的动画不显示。例如-2s 使动画马上开始，但前 2 秒的动画被跳过。

　　5）animation-iteration-count，规定动画应该播放的次数，默认值为1，即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。

　　6）animation-direction，规定是否应该轮流反向播放动画，可设normal，alternate，alternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画，即动画会在奇数次（1，3，5…）正常播放，而在偶数次（2，4，6…）反向播放。alternate-reverse正好反过来，奇数次反向播动画，偶数次正向播动画

二、语法

animation: name duration timing-function delay iteration-count direction;

三、使用

　　1）首先定义在哪里使用动画，例：

div
{
　　animation:mymove 5s infinite;
　　-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
这段代码的意思就是对div定义一个五秒的名为mymove的动画，infinite表示无限循环。
2）然后再定义动画mymove

　　@keyframes mymove
　　{
　　　　from {left:0px;}
　　　　to {left:200px;}
　　}

　　@-webkit-keyframes mymove /*Safari and Chrome*/
　　{
　　　　from {left:0px;}
　　　　to {left:200px;}
　　}

"from" 和 "to"，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成，如果按照百分比描述动画可以定义百分之零到百分之百的任意一百分点的动画这段代码的意思是mymove动画是从距左边零像术运动到距离左边200像术，综合上述就是对div定义一个动画效果是历时五秒该div从左边0像术运动到距左边200像术，这样无限循环下去。

3）完整代码

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>
</html>