按钮无响应需检查 disabled 属性和 pointer-events: none；动画卡顿应优先使用 transform 和 opacity；状态切换须原子化操作 class；移动端需强化 :active 反馈并适配触控。
点击后按钮没反应？检查 pointer-events 和 :disabled 状态
动画触发前按钮常被设为 disabled 或临时加了 pointer-events: none，结果用户点下去像点了空气。这不是动画没写对，是交互链断在第一步。
- 用浏览器开发者工具的“元素”面板，直接看按钮当前是否带
disabled属性或内联样式pointer-events: none -
disabled状态下，:hover和:active伪类全部失效，css 动画也不会启动——得靠 js 主动触发 class 切换，而不是依赖表单原生禁用 - 如果必须禁用交互，推荐用
opacity: 0.6; cursor: not-allowed;+ 手动添加 loading 类，再用 JS 控制提交逻辑，别真设disabled
CSS 动画卡顿或闪一下？优先用 transform 和 opacity
给 width、height、background-color 加动画，容易触发重排（reflow），尤其在低端安卓机上明显掉帧。视觉反馈要快，就得绕开布局计算。
- 加载中旋转效果：用
transform: rotate(360deg)+transform-origin: center，别用border边框 trick - 成功态缩放/位移：只动
transform: scale(1.1)或translateY(-2px)，别碰margin或top - 所有动画加
will-change: transform;（仅在动画持续期间设置，动画结束立刻移除，避免内存泄漏）
JS 控制动画状态时，classList 切换顺序决定成败
按钮从“提交”变“加载中”再变“成功”，状态切换若不原子化，会漏掉中间态或触发两次动画。CSS 动画不支持“中断重播”，靠 JS 协调节奏。
- 不要分两步写：
btn.classList.remove('idle'); btn.classList.add('loading');—— 中间可能有 16ms 裂缝，被浏览器渲染一帧 - 统一用
btn.className = 'btn loading';或btn.setAttribute('class', 'btn loading');，确保 dom class 值一次性更新 - 成功后恢复按钮，别直接
remove('loading')，先加'success'，等动画播完（用setTimeout或animationend事件）再切回'idle'
移动端点击区域小、反馈弱？补上 :active 和触控适配
PC 上 hover 按下有阴影，手机上没 hover，用户点下去没任何视觉变化，就会连点好几次——不是手速问题，是反馈缺失。
立即学习“前端免费学习笔记（深入）”；
- 必须写
button:active { transform: scale(0.98); }，哪怕只是 0.02 的缩放，也能建立操作确认感 - 在
里加<meta name="viewport" content="width=device-width, initial-scale=1">，否则 ios safari 会延迟 300ms 判断是否双击，导致 :active 不触发 - 避免用
min-width强制撑宽按钮，改用padding+min-height，让触控热区真正覆盖整个可点区域
最麻烦的从来不是写完动画，而是让每个状态切换都踩在浏览器渲染帧的节奏上；稍一松懈，loading 就卡住，success 就闪退，用户根本不管你是 CSS 还是 JS 问题，只记得“这按钮不灵”。