CSS动画可通过原生animationend事件监听结束时机，支持现代浏览器，触发时提供animationName、elapsedTime等属性，需注意infinite动画不触发及内存泄漏问题。
可以，CSS 动画能通过 animationend 事件监听结束时机，这是浏览器原生支持的标准事件，无需额外库。
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:
// 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 });
