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