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 属性