玩转CSS动画：JavaScript的强大助攻
在网页动画设计中，开发者需要权衡使用CSS还是JavaScript来满足动画需求。
许多设计师认为CSS动画比JavaScript动画更难驾驭。尽管CSS动画存在一些局限，但它通常比我们想象的更强大，并且在性能方面也表现更优。
立即上手！
结合JavaScript的灵活性，CSS动画和过渡能够实现比大多数JavaScript库更高效的硬件加速动画和交互。让我们即刻开始探索！
精妙控制CSS过渡
在编程社区中，关于如何触发或暂停元素过渡的疑问层出不穷。借助JavaScript，解决方案将变得异常简单。
要触发元素的过渡，只需在元素上切换一个能触发该效果的类名即可。
要暂停元素的过渡，可以使用getComputedStyle和getPropertyValue来获取目标过渡点的值，然后将该元素的CSS属性设置为该值。
巧用CSS回调函数
一个鲜为人知的JavaScript技巧，对于操控CSS过渡和动画至关重要，那就是它们触发的DOM事件。例如，动画有animationend、animationstart、animationiteration，而过渡则有transitionend。这些事件的作用不言而喻：当元素动画结束、开始或完成一次迭代时，它们会相应地触发。
目前这些事件需要供应商前缀。在本演示中，我们使用了Craig Buckler开发的PrefixedEvent函数，它接收element、type和callback参数，从而实现跨浏览器支持。您也可以参考他关于使用JavaScript捕获CSS动画的有用文章，以及如何判断哪个（命名）动画触发了事件的文章。
掌控CSS过渡效果
正如我们刚才所学，我们可以监听元素并响应animationStart、animationIteration、animationEnd等动画相关事件。但如果在动画进行中想要修改CSS动画，该怎么办？这需要一些巧妙的操作！
animation-play-state 属性详解
CSS的animation-play-state属性在需要暂停动画并在稍后恢复时非常有用。您可以通过JavaScript修改CSS，如下所示（请注意前缀）：
元素.风格.即时掌握最新时尚动态 = “暂停”;
元素.风格.点亮您的个性风格灵感 = “进行中”;
获取当前动画帧进度
很遗憾，目前无法精确获取 CSS 关键帧动画的“完成百分比”。 最佳方法是使用setInterval函数进行近似估算 在动画期间迭代 100 次，这本质上是：动画持续时间（毫秒）/ 100。例如，如果动画时长为 4 秒，则 setInterval 需要每 40 毫秒运行一次（4000/100）。
显示百分比 = 窗口.定时器(函数() {
如果 (当前百分比 < 100) {
当前百分比 += 1;
} 否则 {
当前百分比 = 0;
}
// Updates a div that displays the current percent
结果.内部HTML = 当前百分比;
}, 40);
智慧的实现路径
在开始编码之前，仔细思考并规划动画的实现方式，是减少问题并达到预期效果的最佳途径，这比事后搜索解决方案要有效得多！本文概述的技术和技巧可能并非创建项目所需动画的最佳方法。
这里有一些巧妙的示例，展示了如何仅用HTML和CSS就能解决那些您可能认为需要JavaScript的问题。
总结与展望
- 开发者曾需要在CSS和JavaScript之间做出非此即彼的选择。
- 在JavaScript的辅助下，CSS过渡通常比CSS动画更容易管理。
- CSS矩阵变换，尤其对初学者而言，通常难以理解和操作。
- 思考做什么，并提前规划如何实现。