animation-delay 不适合定时触发，因其仅一次性延迟首播、无法动态修改、不可监听延迟结束且不能实现周期性触发；必须用 javascript 控制 class 增删来精准定时。
直接用 animation-delay 只能延迟初始播放，无法实现「页面加载后 X 秒触发一次」或「每隔 Y 秒重复触发」——真要定时触发，必须靠 JavaScript 控制 class 的增删，CSS 只管定义动画本身。
为什么 animation-delay 不适合做“定时触发”
animation-delay 是一次性延迟，只对动画首次播放生效；一旦动画结束，它不会自动重播，除非你手动重置或重新添加 class。更关键的是：如果元素初始就带 animation 声明，页面一渲染就会计算延迟并准备播放——哪怕你还没调用任何 JS，它已在计时。这容易导致动画在用户没注意时悄悄播完，或和后续 JS 触发逻辑冲突。
- 延迟值写死在 CSS 里，没法动态改（比如用户点击后才开始倒计时）
- 无法监听“这次延迟结束了没”，
animationstart事件只在动画真正开始时触发，不是 delay 结束时刻 - 想重复触发？
animation-iteration-count: infinite是循环播同一段，不是“每 3 秒播一次新动画”
用 setTimeout + classList 实现精准定时触发
这是最可控、兼容性最好、也最容易 debug 的方式。核心是：动画样式只存在于某个临时 class 中，JS 在指定时间点加这个 class，播完立刻移除。
- 定义动画时，**不写
animation-fill-mode: forwards**——否则动画结束后样式残留，下次再加 class 就看不出变化 - 给目标元素设一个基础 class（如
.target），里面只写静态样式，**不包含任何animation属性** - 另建一个触发 class（如
.animate-on-timer），里面只写animation: bounce 0.4s ease-out等完整声明 - 用
setTimeout或setInterval控制添加时机，再监听animationend移除 class 防止重复叠加
示例：
const el = document.querySelector('.target');
setTimeout(() => {
el.classList.add('animate-on-timer');
el.addEventListener('animationend', () => {
el.classList.remove('animate-on-timer');
}, { once: true });
}, 5000);
用 animationend 而不是 timeout 来清理 class
别用另一个 setTimeout 去“猜”动画时长然后移除 class——动画实际耗时可能因系统负载、CSS 优化、GPU 加速状态而浮动，animationend 才是唯一可靠的完成信号。
-
animationend事件在动画最后一帧渲染完毕后立即触发，比硬编码setTimeout(..., 400)更精确 - 务必加
{ once: true }，避免多次绑定造成内存泄漏 - 如果动画被中途取消（比如用户快速连续点击），
animationend不会触发，此时需额外处理（如用getComputedStyle(el).animationName === 'none'判断）
需要“每隔 N 秒触发一次”？小心累积和竞态
用 setInterval 很容易出问题：如果动画时长 > 间隔时间，新一次 classList.add 会在上一次还没播完时执行，导致动画叠加、卡顿甚至失效。
- 正确做法是用
setTimeout链式调用：每次动画结束后再设下一次 - 或者加锁机制：
let isAnimating = false，只在!isAnimating时才添加 class，并在animationstart里置为true，animationend再置回false - 别依赖
animation-iteration-count: infinite来模拟定时——它无法响应外部中断，也无法做单次精细控制
真正难的不是写几行代码，而是判断清楚：你到底要的是“延迟一次”，还是“周期性触发”，或是“用户操作后延迟触发”。这三者对应的 JS 控制粒度和清理逻辑完全不同，混用就会出 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
