什么是 animationiteration 事件
animationiteration 事件在 CSS 动画每次重复播放时触发。当动画达到最后一帧并重新开始时，该事件将被触发。
如何使用 animationiteration 事件
要在动画每次重复播放时执行操作，首先需要为目标元素添加 CSS 动画，并在动画定义中指定动画的名称（animation-name）。然后，通过 JavaScript 监听 animationiteration 事件，并在事件处理函数中编写需要执行的操作。
下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
---------------- --------- -------------
-------
---------- ----------- -
-- - ----------------- ---- -
--- - ----------------- ----- -
---- - ----------------- ---- -
-
---- -
------ ------
------- ------
----------------- ----
---------- ----------- -- ---------
-
--------
-------
------
---- ------------------
--------
----- --- - -------------------------------
------------------------------------------ -- -- -
---------------------- --------- ----- ------------
---
---------
-------
-------在上面的示例中，我们定义了一个名为 myAnimation 的 CSS 动画，它会使一个具有 .box 类的 div 元素在红色和蓝色之间切换。然后，我们通过 JavaScript 监听了 animationiteration 事件，并在每次动画重复播放时打印一条消息到控制台。
总结
通过使用 animationiteration 事件，我们可以在 CSS 动画每次重复播放时执行一些操作，为动画效果增添更多的交互性和动态性。希望本文对你有所帮助，谢谢阅读！