仅用CSS中的animation就能实现元素的转动和暂停

div写成一个最简单的吧。

<div class="demo">
    <img src="/img/2.png-600" width="500" height="500"/>
</div>

实现转动很简单。

@keyframes rotation{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
img{
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

在实现暂停的时候，搜罗了好多参考，发现大多数人都在用JS实现，我老觉得应该没那么麻烦吧，这么通俗的逻辑肯定会有前人做好了实现，我们只需要调用就好啦。

然后，“踏破铁鞋无觅处”，让我找到了这个字段animation-play-state。它有两个可选值分别是播放动画running和暂停动画paused，默认这个属性是running状态并且不能使用animation缩写形式。

如果想要做到鼠标移入就暂停转动，就这样写就好了。

.box:hover {
  animation-play-state: paused;
}

想着学习一下animation吧。发现会有几个容易混淆的字段。

可以做一个通俗的解释。

animation 动画~ 关键帧，往复性。
transition 过渡~ 属性，触发动作，一过性。
transform 变换~ 复杂的变换参数。
translate 移动~ translate只是transform的一个属性值，即移动。

官方介绍animation这个属性是transition属性的扩展。

与transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量基于css的动画库，用来取代flash的动画部分。