如何使用animationend事件来实现动画效果

animationend事件可以用来实现动画效果。它是当CSS动画完成后触发的事件。它由CSS动画绑定，当动画完成时触发，可以用来检测动画是否完成，以及执行后续操作。

使用方法

• 需要在HTML元素上添加CSS动画。可以使用CSS3的animation属性，也可以使用JavaScript来实现。
• 需要为元素添加animationend事件监听器。可以使用addEventListener()方法来添加事件监听器，也可以使用onanimationend属性来添加事件监听器。
• 在事件监听器中编写动画完成后需要执行的操作。

// 例如：
let element = document.querySelector('#element');

// 添加CSS动画
element.style.animation = 'fadeOut 1s linear';

// 添加animationend事件监听器
element.addEventListener('animationend', () => {
  console.log('动画完成');
});

通过以上步骤，我们就可以使用animationend事件来实现动画效果。它可以用来检测动画是否完成，以及执行后续操作，是一个非常有用的工具。