关于css3的animaion属性，首先我们要知道它只应用于页面中已存在的DOM元素上，css3的animaion于html5的canvas制作动画是不同的，她虽然略显简单粗糙，也无比跟js和flash比，但是我们认为在某些时候用它，或许可以减少更多的js，更具有优越性。
浏览器兼容：
目前IE10及最新的主流浏览器Firefox、 Opera、Safari 、Chrome等支持 animation 属性。Safari和Chrome需要加前缀。
接下来我们一起来看看CSS3中animation具体如何实现，首先从animation的语法说起。
语法：
animation: name duration timing-function delay iteration-count direction play-state;
上面animation 属性是一个简写的属性，主要包含7个动画属性：
1、animation-name //用来自定义一个动画的名称，用于需要绑定到选择器的 keyframe 名称。
2、animation-duration //用来规定完成动画所花费的时间长，以秒或毫秒计。
3、animation-timing-function //用来规定动画的速度变化速率，也就是动画的播放方式，比如linear、ease等。
4、animation-delay //用来规定在动画开始之前的延迟时间，也就是多少时间后开始动画。
5、animation-iteration-count //用来规定播放动画的循环次数。
6、animation-direction //用来规定动画播放的方向。
7、animation-play-state // 规定动画播放状态。
下面分别来分析下这7个动画属性：
一、animation-name
为 @keyframes 动画规定名称。
语法：
animation-name:none || keyframename
1、 none: none为默认值，当值为none时，将没有任何动画效果。
2、 keyframename: 用于在keyframes设置动画的名称。多个动画名称时以逗号分隔。
二、animation-duration
语法：
animation-duration:time;
取值：time为数值，规定完成动画需要花费的时间（以秒或毫秒计）,可以作用于所有元素，
包括:before和:after伪元素。其默认值是0，意味着不会有效果，也就是动画是即时的。
三、animation-timing-function :
语法：
animation-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-bezier(n,n,n,n);
取值：
animation-timing-function跟transition-timing-function一样的，有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，也就是先慢后快，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），也就是先快后慢，ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），也就是先慢后快再慢，ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
四、animation-delay:
用来规定在动画开始之前的延迟时间，也就是多少时间后开始动画。
语法：
animation-delay：time;
取值：以秒或毫秒计
五、animation-iteration-count:
animation-iteration-count是用来指定元素播放动画的循环次数。
语法：
animation-iteration-count: number || infinite;
取值说明：
number: 定义动画播放次数的数值,number为数字,其默认值为“1”；。
infinite: 无限次数循环。
六、animation-direction:
用来指定元素动画播放的方向。
语法
animation-direction: normal || alternate;
默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
七、animation-play-state:
语法：
animation-play-state:running || paused
running：为默认值。规定动画正在播放。
paused: 规定动画已暂停。
他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下。
八、 下面我们要学习一个动画另一个重要的东西，这个叫“关键帧”，也就是”@keyframes”的东东。
语法
@keyframes animationname {keyframes-selector {css-styles;}}
说明：
如上面所示：Keyframes总是以”@keyframes”开头，后面紧接着的是“动画的名称”，再加上一对花括号“{}”，括号中可以定义一些不同时间段的样式规则。
keyframes-selector有点像我们css样式选择器一样。只不过这里是由百分比组成，如“0%”到”100%”之间，在这个规则中，我们可以创建多个百分比（如下列所示），我们可以分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小等。
我们还可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 “from”就相当于”0%”而”to”相当于”100%”,不过最好还是以百分比表示，有一点我们要注意，百分比中的符号（“%”）不能省略，省略掉的话，那么这个keyframes是无效的，不起任何动画效果。因为keyframes的单位只接受百分比值。
比如：
@-webkit-keyframes 'myname' {
0% {
margin-left:100px;
background:green;
}
40% {
margin-left:150px;
background:orange;
}
60% {
margin-left:75px;
background:blue;
}
100% {
margin-left:100px;
background:red;
}
}
@-webkit-keyframes 'myname' {
from {
margin-left:100px;
background:green;
}
40% {
margin-left:150px;
background:orange;
}
60% {
margin-left:75px;
background:blue;
}
to {
margin-left:100px;
background:red;
}
}
学完上面的属性，其实可以这样简单理解我们要做动画的步骤：
html:
<div class="yuan"></div>css：
@keyframes "myname"{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
.yuan{
animation:myname 5s ease-in;
}
就这样我们就可以简单的做一个动画，具体样式规则大家可以根据自己需求去扩展。
那么，下面我们来看一个具体的完整示例吧：
html:
<div class="wrap-bg">
<div class="demo">ease</div>
</div>
css:
@keyframes 'myname'{
0% {
}
20% {
margin-left:100px;
background:orange;
}
40% {
margin-left:150px;
background:#666;
}
60% {
margin-left:200px;
background:blue;
}
80% {
margin-left:200px;
background:blue;
}
100% {
margin-left:300px;
border-radius:15px;
background:#9F00A7;
}
}
@-moz-keyframes 'myname'{
0% {
margin-left:50px;
}
20% {
margin-left:100px;
background:orange;
}
40% {
margin-left:150px;
background:#666;
}
60% {
margin-left:200px;
background:blue;
}
80% {
margin-left:200px;
background:blue;
}
100% {
margin-left:300px;
border-radius:15px;
background:#9F00A7;
}
}
@-webkit-keyframes 'myname'{
0% {
margin-left:50px;
}
20% {
margin-left:100px;
background:orange;
}
40% {
margin-left:150px;
background:#666;
}
60% {
margin-left:200px;
background:blue;
}
80% {
margin-left:200px;
background:green;
}
100% {
margin-left:300px;
border-radius:15px;
background:#9F00A7;
}
}
.wrap-bg{
width:400px;
height:200px;
background:#f6f6f6;
margin-left:50px;
}
.wrap-bg .demo{
width:100px;
height:100px;
text-align:center;
margin-top:30px;
color:#fff;
background:#34A737;
}
.wrap-bg:hover .demo{
animation:myname 6s ease-in 0.5s infinite;
-moz-animation:myname 6s ease-in 0.5s infinite;
-webkit-animation:myname 6s ease-in 0.5s infinite;
}
效果：(鼠标放在灰色背景层可以看到效果)
