当前位置：首页 > 文章列表 > 文章 > 前端 > CSS动画监听结束事件方法

CSS动画监听结束事件方法

2026-01-10 19:33:42 0浏览收藏

animationend 事件的基本用法

该事件在 CSS animation 完全播放完毕（包括正向播放、反向播放或循环中的最后一次）时触发。注意：它不适用于 transition（过渡），过渡对应的是 transitionend。

监听方式：使用 element.addEventListener('animationend', handler)
兼容性：现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）均支持
触发条件：动画自然结束、被取消（如 class 移除导致动画中断）、或通过 animation-play-state: paused 暂停后恢复并走完剩余时间，都可能触发——但强制中断（如移除 animation-name）不一定触发，需谨慎处理

获取关键动画信息

事件对象提供多个有用属性，帮助你判断具体是哪个动画结束：

event.animationName：返回触发事件的 @keyframes 名称（字符串），可用于区分多个动画
event.elapsedTime：动画实际运行的秒数（不含 delay），对调试和逻辑判断很实用
event.pseudoElement：若动画发生在伪元素（如 ::before）上，该值为 ::before 或 ::after；否则为 ''

常见陷阱与应对建议

实际使用中容易忽略几个细节：

重复动画多次触发：如果设置了 animation-iteration-count: infinite，animationend 永远不会触发；若设为 3，则会在第 3 次结束后触发一次（不是每次迭代都触发）
延迟（animation-delay）不影响事件时机：animationend 的 elapsedTime 不包含 delay 时间，只算实际动画持续时间
避免内存泄漏：若动态添加/移除动画，建议在回调中手动 removeEventListener，或使用一次性监听（{ once: true }）
前缀兼容（已基本不用）：旧版 Safari/Chrome 曾用 webkitAnimationEnd，现在可直接用标准名

简单示例：动画结束后移除 class

常用于“播放一次 → 隐藏/重置元素”场景：

// HTML: Hello

// CSS: .slide-in { animation: slide 0.3s ease-out; }
//      @keyframes slide { from { transform: translateX(-100px); } to { transform: translateX(0); } }

const box = document.getElementById('box');
box.addEventListener('animationend', function(e) {
  if (e.animationName === 'slide') {
    box.classList.remove('slide-in');
  }
}, { once: true });

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS动画监听结束事件方法》文章吧，也可关注golang学习网公众号了解相关技术文章。