css动画点击后只执行一次卡住，因默认不重播，需通过移除类→offsetheight强制重排→重新添加类来重置；应优先使用transform/opacity触发gpu加速，避免layout触发卡顿。
点击按钮后动画只执行一次就卡住
这是因为 CSS 动画默认不会重播，animation 触发后进入“已播放”状态，再次点击也不会重新开始。必须手动重置动画状态才能复用。
- 最可靠的做法是：移除动画类 →
offsetHeight强制重排 → 重新添加类（触发重绘） - 避免用
animation-play-state: paused/running控制，它不重置播放进度 - 不要依赖
animationend后直接删 class——若动画被中断（如快速连点），事件可能不触发
button.addEventListener('click', () => {
btn.classList.remove('animate-bounce');
btn.offsetHeight; // 强制重排，清空渲染队列
btn.classList.add('animate-bounce');
});
用 JavaScript 控制 CSS 动画比纯 CSS :active 更灵活
:active 只能响应按下瞬间，松开就结束，无法实现“点击→淡入→缩放→停留 200ms→淡出”这类多阶段流程。JS + @keyframes 是唯一可控方案。
- 把动画逻辑写在 class 里（如
.pulse-in-out），JS 只负责开关，职责分离 - 动画时长和延迟必须与 JS 中的
setTimeout或animationend严格对齐，否则容易错拍 - 移动端要注意
touchstart替代click，避免 300ms 延迟导致动画滞后
动画卡顿或闪烁的常见原因
不是代码写错了，而是浏览器没走 GPU 加速路径。关键看是否触发了 Layout 或 Paint。
- 慎用
width/height/top/left动画——它们强制同步布局计算 - 优先用
transform（scale,translate）和opacity，这两者可由 GPU 独立处理 - 给动效元素加
will-change: transform提前提示浏览器，但别滥用，否则内存开销明显 - 检查 DevTools 的 Rendering 面板，勾选 “Paint flashing”，看是否有大面积绿色闪动（说明频繁重绘）
需要兼容旧版 Safari 时的坑
Safari 12–14 对 animation-fill-mode: forwards 支持不稳定，动画结束后样式常回退到初始值，尤其影响 transform 类属性。
- 必须显式在动画最后一帧定义终态，不能只靠
forwards - 例如：keyframes 里
to { transform: scale(1.2); }不够，得补上100% { transform: scale(1.2); } - 避免用
animation: name 0.3s简写——Safari 有时忽略 duration，退化成0s - 测试时务必真机跑 iOS 13.7，模拟器不可靠
btn.disabled = true 或节流标记防止 class 反复增删导致渲染管线混乱。这不是动画问题，是交互节奏没管住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
