animation只应用在页面上已存在的DOM元素上，学这个不得不学keyframes，我们把他叫做“关键帧”。
keyframes的语法法则：
@keyframes flash { from{ left:0; } 50%{ left:50px; } to{ left:100px; } }
或
@keyframes flash { 0%{ left:0; } 50%{ left:50px; } 100%{ left:100px; } }
为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器！
为了兼容更多浏览器，还需要加可恶的前缀：
@-moz-keyframes flash｛...｝ /* Firefox */
@-webkit-keyframes flash{...} /* Safari 和 Chrome */
@-o-keyframes flash{...} /* Opera */
animation可设置6个属性：
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。(linear匀速、ease加速、ease-in慢到快、ease-out快到慢、ease-in-out低速开始低速结束)
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数， infinite--无限次播放
animation-direction 规定是否应该轮流反向播放动画。 值normal--正常播放，值alternate--轮流返向播放
为了兼容更多浏览器，属性前还需要加可恶的前缀：
-moz-animation /* Firefox */
-webkit-animation /* Safari 和 Chrome */
-o-animation /* Opera */
小实例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>动画</title> <style> .box{width:100px;height:100px; background: #000; position:relative; -webkit-animation: flash 5s ease-out; animation: flash 5s ease-out; } @-webkit-keyframes flash { 0%{ top:0; left:0; background:red; } 25%{ left:200px; top:0; background: #000; } 50%{ top:200px; left:200px; } 75%{ top:200px; left:0; } 100%{ left:0; top:0 } } @keyframes flash { 0%{ top:0; left:0; background:red; } 25%{ left:200px; top:0; background: #000; } 50%{ top:200px; left:200px; } 75%{ top:200px; left:0; } 100%{ left:0; top:0 } } </style> </head> <body> <div class="box"> </div> </body> </html>
注意：Internet Explorer 9 以及更早的版本不支持 animation 属性