animationstart 事件

事件绑定

要使用 animationstart 事件，我们需要先选中需要绑定事件的元素，然后通过 addEventListener 方法来绑定事件处理函数。下面是一个简单的示例代码：

const element = document.getElementById('myElement');

element.addEventListener('animationstart', function(event) {
  console.log('Animation started!');
});

在这段代码中，我们选中了 id 为 myElement 的元素，并为其绑定了一个 animationstart 事件处理函数。当该元素上的 CSS 动画开始播放时，控制台会输出 "Animation started!"。

示例代码

为了更好地理解 animationstart 事件的使用方法，下面给出一个完整的示例代码，实现一个简单的动画效果：

// 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 Start Event</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: move 2s infinite;
    }

    @keyframes move {
      0% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(200px);
      }
      100% {
        transform: translateX(0);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    const box = document.querySelector('.box');

    box.addEventListener('animationstart', function(event) {
      console.log('Animation started!');
    });
  </script>
</body>
</html>

在这个示例中，我们创建了一个红色的正方形盒子，并为其添加了一个名为 move 的动画，让盒子在 x 轴上来回移动。当动画开始播放时，控制台会输出 "Animation started!"。

结语

animationstart 事件可以帮助我们更好地控制和定制动画效果，在实际开发中可以结合其他事件和 CSS 属性来实现更加丰富和复杂的动态效果。希望本文对你有所帮助，谢谢阅读！