css动画结束后不会自动重置，需强制重排再重设animation属性才能重播：先设animation为none，再读offsetheight触发重排，最后恢复animation值。
animation 动画结束后 animation-play-state 不会自动重置
CSS 动画默认只播放一次，结束后元素停留在最后一帧（animation-fill-mode: forwards 时），此时直接修改 animation 属性值（比如改 animation-name 或加个空格）往往无效——浏览器认为该动画已“完成”，不会重新触发。关键不是“没动”，而是“没被当作新动画启动”。
最可靠：强制重绘 + 重设 animation
核心思路是让浏览器丢弃当前动画状态，再注入新动画。必须分两步，且中间要有 DOM 重排时机：
- 先清空
animation（设为none或空字符串） - 立即读取一个强制重排的属性（如
offsetHeight、getComputedStyle(el).transform） - 再重新设置完整
animation值
function replayAnimation(el, animationName, duration = '0.3s') {
el.style.animation = 'none';
void el.offsetHeight; // 强制重排，清空动画状态
el.style.animation = `${animationName} ${duration} ease`;
}
用 animationiteration 事件监听循环动画？不适用单次播放
这个事件只在 animation-iteration-count > 1 且动画循环时触发，对 animation-iteration-count: 1（默认）完全无效。别试图监听它来“重启”单次动画——它根本不会发生。
-
animationend可监听结束，但仅用于清理或后续逻辑，不能靠它自动重播 - 想“点一下播一次”，必须手动调用重播函数（如上）
- 若需反复触发，建议封装成可复用函数并绑定到按钮/事件
用 @keyframes 切换名称绕过缓存？风险高且不可靠
有人尝试动态改 animation-name（比如从 slideIn 改成 slideIn2），以为能骗过浏览器。但实际中：
立即学习“前端免费学习笔记（深入）”；
- 若两个
@keyframes定义完全一致，部分浏览器仍会复用状态 - 维护多套几乎相同的动画名增加冗余和出错概率
- 不如直接用重绘法稳定，且无需额外 CSS
真正容易被忽略的是：**重排那一步不能省，也不能用 setTimeout 替代**。异步延迟无法保证重排时机，void el.offsetHeight 是最小代价的同步强制重排手段。
