transitionend事件及其在CSS动画中的应用

transitionend事件是CSS3中的一种事件，当CSS3 transition动画完成时，它就会被触发。它可以让你在动画完成后执行一些操作，比如改变元素的样式或执行一段JavaScript代码。

使用transitionend事件非常简单，只需要在元素上添加一个事件监听器，当transition动画完成时，就会触发这个事件。例如：

element.addEventListener("transitionend", function(){
  // 动画完成后要执行的操作
});

transitionend事件在CSS动画中有很多应用，比如可以用它来检测动画是否完成，从而执行后续的操作，也可以用它来重新开始动画，让动画可以无限循环，还可以用它来改变动画的状态，让动画可以根据不同的条件执行不同的动作。

例如，当动画完成时，可以使用transitionend事件来重新开始动画：

element.addEventListener("transitionend", function(){
  element.style.animation = "myAnimation 2s infinite";
});

这样，动画就可以无限循环了。

可以使用transitionend事件来改变动画的状态，从而让动画根据不同的条件执行不同的动作：

element.addEventListener("transitionend", function(){
  if (condition) {
    element.style.animation = "myAnimation 2s infinite";
  } else {
    element.style.animation = "myOtherAnimation 2s infinite";
  }
});

这样，当条件满足时，动画就会执行myAnimation，否则就会执行myOtherAnimation。

transitionend事件可以让你在动画完成后执行一些操作，比如重新开始动画，改变动画的状态，从而让动画可以根据不同的条件执行不同的动作。