用 addEventListener 绑定点击事件，通过添加/移除 class 触发 CSS @keyframes 动画最轻量兼容；需确保 DOM 加载完成、声明 animation-duration 和 animation-fill-mode: forwards，并用 animationend 清理 class 防重复触发。
怎么用 addEventListener 触发 CSS 动画
直接给元素绑定点击事件，再通过添加/移除 class 控制 @keyframes 动画是最轻量、兼容性最好的方式。别试图用 JS 一帧帧写动画——没必要，也难维护。
关键点：
-
addEventListener必须在 DOM 加载完成后执行（比如放在标签末尾，或用DOMContentLoaded） - 动画 class 要定义
animation或animation-name+animation-duration，否则加了也没反应 - 重复点击时，如果动画没结束就再次触发，可能卡住——加个
animationend事件清理 class，或用getComputedStyle(el).animationName判断是否正在播
示例：
const btn = document.querySelector('#myBtn');
btn.addEventListener('click', () => {
const box = document.querySelector('.box');
box.classList.add('bounce');
// 防止连续点击叠加动画
box.addEventListener('animationend', () => {
box.classList.remove('bounce');
}, { once: true });
});
CSS 动画 class 怎么写才不“闪一下就停”
常见问题：点了没反应，或者只闪一下、没动效——大概率是动画未声明持续时间或未设 animation-fill-mode。
立即学习“前端免费学习笔记（深入）”；
必须写的属性：
-
animation-name：对应@keyframes名字，大小写敏感 -
animation-duration：不能为 0s（哪怕写0.01s也行） -
animation-fill-mode: forwards：让动画最后一帧保持住，否则 class 移除后立刻回退
示例：
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.bounce {
animation: bounce 0.4s ease-in-out forwards;
}
用 requestAnimationFrame 做交互动画适合什么场景
只有当你要响应鼠标移动、拖拽、滚动，或需要逐帧控制（比如缓动曲线自定义、物理模拟），才值得上 JS 动画。普通点击触发动画，CSS 就够了。
如果真要用 JS 控制帧：
- 别在
click回调里直接写循环或setTimeout，会阻塞 UI - 用
requestAnimationFrame替代setInterval，保证和屏幕刷新率同步 - 记得在动画结束时清除 rAF ID，避免内存泄漏
- 注意移动端 touch 事件需额外处理
touchstart，且要加preventDefault()防止误触发滚动
移动端点击无响应？检查这三件事
HTML5 动画在手机上点不动，90% 是以下原因：
- 元素没设置
cursor: pointer或touch-action: manipulation，iOS Safari 默认忽略非可点击元素的click事件 - 父容器有
pointer-events: none，或者被其他层遮挡（比如伪元素、fixed 导航栏） - 动画 class 添加后，元素因
transform或opacity变化导致重绘区域失效，需强制触发硬件加速：transform: translateZ(0)或will-change: transform
简单补救：
#myBtn {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
真正麻烦的是动画与状态耦合——比如点一次播放，再点暂停，但没存当前播放状态；或者多个按钮共用一个动画 class 却没做互斥控制。这些细节比“怎么加动画”更消耗调试时间。
