animationend 是标准且可靠的 CSS 动画结束监听方式，现代浏览器原生支持，需用 { once: true } 避免内存泄漏；多动画共存时应通过 event.animationName 和 Set 管理待完成动画名；无限循环、未启动或绑定错误是常见不触发原因；建议搭配超时兜底确保健壮性。
animationend 事件是标准且可靠的监听方式
能，CSS 动画结束状态可通过原生 animationend 事件准确监听，这是 W3C 标准事件，现代浏览器（Chrome/Firefox/Safari/Edge）均原生支持，无需 polyfill 或第三方库。
- 它只在动画自然播放完毕（含
animation-iteration-count指定的最后一次）、或被显式中断（如移除 class 导致animation-name失效）时触发——但注意：强制移除样式不总保证触发，行为因浏览器略有差异 - 伪元素（
::before/::after）上触发时，event.pseudoElement会返回对应字符串，可用于精准定位 - 务必使用
{ once: true }选项绑定，避免重复监听导致内存泄漏：element.addEventListener('animationend', handler, { once: true });
多个动画共存时如何判断“全部结束”
一个元素若同时应用多个 CSS 动画（例如分别控制 opacity 和 transform），每个动画都会独立触发一次 animationend，但事件对象的 event.animationName 属性可区分来源。
- 不要依赖计数器简单累加（如
count++），因为动画可能因 class 移除、样式重置等提前终止，导致次数不匹配 - 推荐用 Set 管理待完成动画名：
const pending = new Set(['fade-in', 'slide-up']);<br>element.addEventListener('animationend', (e) => {<br> pending.delete(e.animationName);<br> if (pending.size === 0) {<br> console.log('所有动画已结束');<br> }<br>}); - 若动画使用了
animation-delay，注意event.elapsedTime不包含 delay 时间，仅反映实际播放时长
animationend 不触发？先排查这三类常见原因
监听不到事件，大概率不是浏览器兼容问题，而是配置或生命周期逻辑出错。
-
animation-iteration-count: infinite—— 无限循环动画永远不会触发animationend，必须设为具体数值（如3）才会在最后一次结束后触发 - 动画未真正“启动”：元素初始无
animation-name，靠 JS 添加 class 启动时，需确保 class 已生效再监听；建议在setTimeout(() => { /* add listener */ }, 0)或requestAnimationFrame后注册 - 监听对象错误：动画若定义在伪元素上，事件实际派发到宿主元素，但必须用
element.addEventListener绑定在该宿主上，不能误绑在伪元素 DOM 节点（它不可选中）
animation-fill-mode 影响的是“结束后的视觉状态”，不是事件时机
animationend 触发时刻与 animation-fill-mode 无关，它只取决于动画是否走完指定迭代次数。但该属性决定动画停住后元素“看起来什么样”，常和事件配合使用。
立即学习“前端免费学习笔记（深入）”；
-
forwards最常用：让元素保持最后一帧样式（如transform: translateX(100px)），否则动画一结束就闪回原始位置 - 若同时需要“保留样式 + 执行后续逻辑”，典型写法是：在
animationend回调里移除动画 class，并添加终态 class：element.classList.remove('animate-slide');<br>element.classList.add('slide-finished'); - 慎用
both：它会让元素在animation-delay阶段就提前显示第一帧样式，可能造成意外的初始闪烁
真正容易被忽略的，是事件触发的非确定性边界：比如用户快速连续触发动画、动画被 JS 中断、或 CSSOM 批量重排导致动画跳帧——这些情况下 animationend 可能不触发，或触发时机偏移。生产环境建议搭配超时兜底（如 setTimeout 基于 animation-duration + animation-delay 计算），而非完全信任单一事件。
