transition通过事件来触发动画效果，所以它本身就存在很多局限性。如果我希望动画效果能够自动执行怎么办？这就需要 用到css3的另一个重要 的属性——animation
关键帧
说到animation就不得不说一下关键帧(keyframes)，它指定了动画在不同时间段的样式。
@keyframes around{
0%{transform:translateX(0);}
25%{transform:translateX(180px);}
50%{transform:translate(180px,180px);}
75%{transform:translate(0,180px);}
100%{transform:translateY(0)}
}
上述代码创建了一个名字为around的关键帧，它指定了动画(时间)在
0%，25%，50%，75%，100%的位置分别为左上，右上，右下，左下，左上(假设div的宽高为180px)。
animation
调用动画——animation：关键帧的动画名称
animation-duration：设置动画完成时间
单位：秒或毫秒
animation-timing-function：过渡函数
参数同transition-timing-function
animation-delay：延迟时间
单位：秒或毫秒
animation-iteraction-count：指定动画的播放次数(默认播放一次)
1.n：播放n次
2.infinite：播放无限次
animation-direction：指定播放方向
1.normal：默认值，每次循环都是正序播放
2.alternate：偶数次循环使反方向播放
animation-fill-mode：指定动画的开始、结束样式
1.none：默认动画结束后返回到0%帧的样式
2.forwards：动画结束后停留在最后的帧的样式
3.backwards：在准备执行动画之前让元素迅速应用动画初始帧的样式
(比如元素透明度为1，0%的样式为透明度为0，在开始动画之前元素的透明度已经是0了，否则就会出现先变为0后开始执行动画的情况)
4.both：forwards+backwards
animation的前四个属性是必须的。
也可以把这些属性写到一起
div span{
display:inline-block;
width:20px;
height:20px;
background:red;
border-radius:10px;
animation:around 10s ease 1s infinite backwards;
}
最终的动画效果：小球从左上角由快到慢到达右上角，再由快到慢到达右下角，再由快到慢到达左下角，最后回到原点并且一直循环下去。
过渡函数会作用的每一帧上，也就是每一帧到达下一帧的动画都是由快到慢。
animation和@keyframes也要写css hack，关键帧的前缀写在@和keyframes之间：@-webkit-keyframes{...}
