animationiteration 事件

什么是 animationiteration 事件

animationiteration 事件在 CSS 动画每次重复播放时触发。当动画达到最后一帧并重新开始时，该事件将被触发。

如何使用 animationiteration 事件

要在动画每次重复播放时执行操作，首先需要为目标元素添加 CSS 动画，并在动画定义中指定动画的名称（animation-name）。然后，通过 JavaScript 监听 animationiteration 事件，并在事件处理函数中编写需要执行的操作。

下面是一个示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Iteration Event</title>
<style>
    @keyframes myAnimation {
        0% { background-color: red; }
        50% { background-color: blue; }
        100% { background-color: red; }
    }

    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: myAnimation 2s infinite;
    }
</style>
</head>
<body>
<div class="box"></div>

<script>
    const box = document.querySelector('.box');
    box.addEventListener('animationiteration', () => {
        console.log('Animation iteration event triggered');
    });
</script>
</body>
</html>

在上面的示例中，我们定义了一个名为 myAnimation 的 CSS 动画，它会使一个具有 .box 类的 div 元素在红色和蓝色之间切换。然后，我们通过 JavaScript 监听了 animationiteration 事件，并在每次动画重复播放时打印一条消息到控制台。

总结

通过使用 animationiteration 事件，我们可以在 CSS 动画每次重复播放时执行一些操作，为动画效果增添更多的交互性和动态性。希望本文对你有所帮助，谢谢阅读！