View in EnglishAlways switch to English

元素：animationend 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2019年12月.

animationend（动画结束）事件在CSS 动画完成时触发。如果在动画完成前中止了动画，例如将元素从 DOM 中移除，或将动画从元素上移除，animationend 事件不会触发。

语法

在addEventListener() 方法中使用事件名称，或设置事件处理器属性。

addEventListener("animationend", (event) => {});onanimationend = (event) => {};

事件类型

AnimationEvent。继承自Event。

事件属性

也从其父接口Event 继承属性。

AnimationEvent.animationName只读: 一个字符串，包含了生成动画的animation-name 的值。
AnimationEvent.elapsedTime只读: 一个浮点数（float），表示动画运行的时间（以秒为单位）。此事件的这个属性并不包括动画暂停的时间。对于animationstart 事件，elapsedTime 的值为0.0（除非将animation-delay 设置成了一个负值，在这种情况下，elapsedTime 为(-1 * delay)）。
AnimationEvent.pseudoElement只读: 一个字符串，以'::' 开头，包含了动画运行时所在的伪元素的名称。如果动画不是在伪元素而是在元素上运行，则为空字符串：''。

示例

该实例获取一个正在绘制动画的元素，并监听animationend 事件。

const animated = document.querySelector(".animated");animated.addEventListener("animationend", () => {  console.log("Animation ended");});

同上，但使用onanimationend 事件处理器属性：

const animated = document.querySelector(".animated");animated.onanimationend = () => {  console.log("Animation ended");};

运行实例

HTML

html

<div>  <div>    <p>你选择了一个寒冷的夜晚到访我们的星球。</p>  </div>  <button type="button">激活动画</button>  <div></div></div>

CSS

css

.container {  height: 3rem;}.event-log {  width: 25rem;  height: 2rem;  border: 1px solid black;  margin: 0.2rem;  padding: 0.2rem;}.animation.active {  animation-duration: 2s;  animation-name: slidein;  animation-iteration-count: 2;}@keyframes slidein {  from {    margin-left: 100%;    width: 300%;  }  to {    margin-left: 0%;    width: 100%;  }}

JavaScript

const animation = document.querySelector("p.animation");const animationEventLog = document.querySelector(  ".animation-example>.event-log",);const applyAnimation = document.querySelector(  ".animation-example>button.activate",);let iterationCount = 0;animation.addEventListener("animationstart", () => {  animationEventLog.textContent = `${animationEventLog.textContent}'动画开始' `;});animation.addEventListener("animationiteration", () => {  iterationCount++;  animationEventLog.textContent = `${animationEventLog.textContent}'动画迭代轮次：${iterationCount}' `;});animation.addEventListener("animationend", () => {  animationEventLog.textContent = `${animationEventLog.textContent}'动画结束'`;  animation.classList.remove("active");  applyAnimation.textContent = "激活动画";});animation.addEventListener("animationcancel", () => {  animationEventLog.textContent = `${animationEventLog.textContent}'动画已被取消'`;});applyAnimation.addEventListener("click", () => {  animation.classList.toggle("active");  animationEventLog.textContent = "";  iterationCount = 0;  const active = animation.classList.contains("active");  applyAnimation.textContent = active ? "取消动画" : "激活动画";});