在前端开发中，CSS 动画是常用于网页交互和页面效果实现的关键技术之一。但是，在某些情况下，我们可能需要控制动画的播放，例如在用户点击某个按钮时暂停动画，再次点击时恢复动画。虽然 CSS3 本身并没有提供直接的方法来控制动画的播放，但是我们可以通过 JavaScript 来实现该功能。
基本思路
要实现控制 CSS3 动画的暂停和恢复，我们需要做以下几件事情：
- 获取元素
- 暂停动画
- 恢复动画
首先，我们需要获取到需要控制动画的元素。然后，当我们想要暂停动画时，我们需要将元素的样式设置为当前动画的状态，并且将动画的相关属性（如 animation-play-state）设为 paused。当需要恢复动画时，我们需要将元素的样式设置为动画结束的状态，并将动画的相关属性设为 running。
具体实现
下面是一个具体的实现示例，以控制一个简单的淡入淡出动画的播放为例：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- ----------------
------- ----------------
------ -
-------------------- -----
--------- ------
---------- ------
------------- --------- -- ---------
---
------------ --------- -
----- -
------------ --
----
------ -
------------ --
----
------- -
------------ --
----
---
---------
-------
------
----- ------------------
-------- ----------------------
-------- -----------------------
----- --- - -------------------------------
--- - -------------------------------
-------------- - -----
-- ----------
----------- - ---------- -
-- ---------------- -
---------------------------- - ---------
--------------- - -------
-------------- - ------
- ---- -
---------------------------- - ----------
--------------- - -------
-------------- - -----
-
--
----------
-------
-------在这个示例中，我们首先定义了一个类名为 .box 的元素，并给它设置了一个淡入淡出的动画。然后，在页面中添加了一个按钮，点击该按钮可以控制动画的播放。
通过 JavaScript，我们获取到了 .box 元素和按钮元素，并且监听了按钮的点击事件。当点击按钮时，我们根据当前动画状态来切换动画的播放状态，并修改按钮的文本内容。
总结
通过上述实现，我们可以看到如何使用 JavaScript 控制 CSS3 动画的暂停和恢复。这种方法不仅在控制动画上具有很好的应用价值，还可以帮助我们更深入地理解 CSS3 动画和 JavaScript 的交互方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15059