按钮active状态下抖动不触发，因:active仅在按下瞬间生效；需用@keyframes定义shake动画并在:active中调用，配合animation-fill-mode或短时长（≤300ms），优先使用translate而非rotate，注意兼容性与多输入方式一致性。
button active 状态下 transform 抖动不触发？
因为 :active 伪类默认只在鼠标按下/触摸开始的瞬间生效，松开就结束，而抖动动画需要持续若干帧 —— 如果没显式定义 animation 或用 transform 配合 transition，光靠 :active 是“闪一下就没了”，根本看不到抖。
实操建议：
- 必须用
@keyframes定义抖动动画（比如左右位移），不能只靠transform: translateX(2px)这种单帧样式 -
:active里要调用animation，且设animation-fill-mode: forwards可选，但更推荐用animation-duration控制在 0.3s 内完成，避免卡住 - 移动端要注意：部分安卓 WebView 对
:active支持弱，需加touchstart事件或启用* { -webkit-tap-highlight-color: transparent; }
抖动动画该用 translate 还是 rotate？
优先用 translateX + translateY 组合，别碰 rotate。真实场景中，“震动”是短促偏移，不是旋转；rotate 在小角度下视觉反馈弱，还容易让文字模糊（尤其非整像素旋转时）。
常见错误现象：transform: rotate(0.5deg) 看不出抖，但用户手指已松开，体验断层。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 典型抖动 keyframes：
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0); } } - 幅度控制在 ±2px ~ ±6px，超过 8px 显得廉价；总时长 ≤ 300ms，否则像卡顿
- 避免在抖动中混用
scale，会改变按钮尺寸，可能影响布局或触发重排
为什么加了 animation，点击却没反应？
最常踩的坑：CSS 动画被其他规则覆盖，或者触发条件没对上。比如按钮是 <button disabled></button>，那 :active 根本不会生效；又或者父容器有 pointer-events: none。
实操建议：
- 检查 computed styles，确认
:active规则是否真的被应用（浏览器 DevTools 里勾选 “:active” 强制触发） - 确保 button 没被
opacity: 0或visibility: hidden干扰，这些不影响:active，但会让动画不可见 - 如果用了 CSS-in-JS 或 scoped style（如 Vue SFC），注意
:active选择器作用域是否正确，有时要写成:deep(button):active
要不要用 JavaScript 控制抖动类名？
要，尤其当需要精确控制触发时机、或兼容老浏览器时。纯 CSS 的 :active 不可靠，比如快速连点、键盘回车触发、或屏幕阅读器操作，:active 都不响应。
实操建议：
- 监听
mousedown/touchstart，立即添加is-shaking类；动画结束后用animationend移除 - 类名里定义动画：
.is-shaking { animation: shake 0.3s cubic-bezier(.36,.07,.19,.97); } - 避免直接操作
style.transform，JS 手动改transform会覆盖 CSS 动画，导致抖动中断
抖动看似简单，但真实项目里最容易忽略的是「触发一致性」——鼠标、触屏、键盘、辅助工具，每种输入方式都要能唤起相同反馈。别只盯着 :active 能不能动，先问一句：用户怎么点这个按钮？
