animation_events

动画事件（Animation Events）是Web开发中用于控制动画的关键技术。通过动画事件，我们可以精确地控制动画的开始、结束、重播等行为。

动画事件概述

动画事件主要包括以下几种：

• animationstart: 当动画开始时触发。
• animationend: 当动画结束时触发。
• animationiteration: 当动画重复播放时触发。
• animationcancel: 当动画被取消时触发。

使用方法

以下是一个简单的示例，展示如何使用animationstart事件：

<div id="animated-box" style="width: 100px; height: 100px; background-color: red; animation: slideIn 2s;"></div>

<script>
  var box = document.getElementById('animated-box');
  box.addEventListener('animationstart', function() {
    console.log('动画开始');
  });
</script>

在上面的例子中，当动画开始时，会在控制台输出“动画开始”。

扩展阅读

想要了解更多关于动画事件的知识，可以阅读以下文章：

• MDN Web Docs - Animation Events

动画效果示例