有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解。虽然CSS动画有其局限性，但它的性能比大多数JavaScript库更加高效，因为它可以借助硬件加速啊！其效果绝对可以超出我们的预期。

CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画，而且其交互效果比大多数JavaScript库更高效。

So,让我们快点开始吧！小伙伴们都等不及了！

注意：Animations(动画)和Transitions(过渡)是不同的

CSS Transitions(过渡)被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终需要的值；而CSS Animations(动画)只是在应用时执行之前定义好的操作，它提供更细粒度的控制。

在这篇文章中，我们将分别针对上述内容进行讲解。

控制CSS Transition(过渡)

在编程论坛中，关于transition(过渡)的触发和暂停有无数的疑问。使用JavaScript可以很容易的解决这些疑问。

触发元素的transiton(过渡)，切换元素的类名可以触发该元素的transition(过渡)

暂停元素的transition(过渡)， 在你想要暂停过渡点，用getComputedStyle和getPropertyValue获取该元素相应的CSS属性值，然后设置该元素的对应的CSS属性等于你刚才获取到的CSS属性值。

以下是该方法的一个例子。

执行效果：

同样的技术可以用在更高级的方法上。下面的例子也是通过改变类名来触发元素的transition(过渡)，但这次可以跟踪当前的缩放率。

执行效果：

注意我们这次改变的是background-size的值。有许多不同的CSS属性可以应用到过渡和动画中，这些属性通常具有数值或颜色值。关于CSS transitions(过渡)，Rodney Rehm也写了一篇非常不错的文章，这里可以访问到。

使用CSS“回调函数”

一些最有用但鲜为人知javascript技巧，就是利用监听Dom事件控制CSS transitions(过渡)和animations(动画)。如：与animations(动画)相关的animationEnd,animationStart和animationIteration；与transitions(过渡)相关的transitonEnd。你可能已经猜到它们是做什么的。这些动画事件分别是在元素的动画结束时，开始时，或者完成一次迭代时触发。

目前使用这些事件还需要添加浏览器前缀，所以在这个演示中，我们使用由Craig Buckler开发的叫PrefixedEvent的方法。该方法的参数有element(元素)，type(类型)和callback(回调)来实现跨浏览器的兼容。这里是他的一篇文章。这里是另一篇关于通过判断动画名称来判断触发哪个事件。

这个演示想实现当鼠标悬浮时停止动画，并放大心型图案。

执行效果：

纯CSS版本在鼠标悬停时会跳一下，除非你在恰当的时机鼠标移上去，不然它会在扩大到最终悬停状态之前先跳到一个特定状态。JavaScript版本就非常流畅，它在应用新的放大状态之前先让动画完成，这样鼠标悬停时就不会跳动。

控制CSS Animation(动画)

就像我们刚刚了解到的，我们可以看到与元素动画相关的事件：animationStart,animationIteration,animationEnd。但是如果我们想改变CSS animation(动画)执行过程中的动画，还需要一点技巧！

animation-play-state属性
当你想在动画执行过程中暂停，并且接下来让动画接着执行。这时CSS的animation-play-state属性是非常有用的。你可以可以通过JavaScript像这样更改CSS(注意你的前缀)：