直接用 animation: shake 0.5s 常无反应，因CSS动画不自动重播且浏览器会优化连续相同动画；需通过JS切换.shaking类、加防重判断和once监听，并解决移动端缺少cursor/touch-action、overflow裁剪及缺硬件加速等问题。
为什么直接用 animation: shake 0.5s 常常没反应
多数人复制粘贴 @keyframes shake 后发现点击无动画，根本原因是：CSS 动画不会自动触发重播——哪怕你反复添加又移除同一个 class，浏览器会优化掉“相同动画的连续播放”。:active 伪类持续时间太短（通常
- 必须用 JavaScript 主动 toggle 一个 class，并在动画结束后手动清除，才能保证每次点击都重新触发
-
animation-fill-mode: forwards会卡住最后一帧，导致下一次动画无法启动，务必设为none或不写 - 震动位移量建议控制在
±2px到±4px，过大显得突兀，过小人眼难察觉
如何写出真正可用的 shake @keyframes 规则
网上常见的 5 步左右的 shake 写法容易节奏生硬。实际要模拟物理震动感，得用非对称、快速衰减的位移序列，且避免使用 transform: translateX() 单轴——加入轻微 translateY() 和旋转能增强真实感。
@keyframes shake {
0% { transform: translate(0, 0) rotate(0); }
25% { transform: translate(-3px, -1px) rotate(-0.5deg); }
50% { transform: translate(2px, 1px) rotate(0.3deg); }
75% { transform: translate(-1px, -0.5px) rotate(-0.2deg); }
100% { transform: translate(0, 0) rotate(0); }
}
- 总时长建议
0.4s–0.6s，再短像抽搐，再长像晃悠 - 关键帧数至少 4 个，中间点不要对称分布（比如 25%/50%/75% 是安全选择）
- 务必显式声明
transform-origin: center防止元素锚点偏移影响震动中心
JavaScript 绑定点击震动的最小可靠写法
不用框架、不依赖第三方库，只靠原生 JS + classList 就能稳定工作。重点是：加 class 后不能立刻删，得等 animationend 事件；同时要防连续点击导致动画队列堆积。
function triggerShake(el) {
if (el.classList.contains('shaking')) return;
el.classList.add('shaking');
el.addEventListener('animationend', () => {
el.classList.remove('shaking');
}, { once: true });
}
document.querySelector('#my-btn').addEventListener('click', () => triggerShake(this));
- CSS 中需定义
.shaking { animation: shake 0.5s ease-out; } - 用
{ once: true }确保监听器只执行一次，避免内存泄漏 - 加防重判断
if (el.classList.contains('shaking'))，否则快速连点会卡住动画状态
移动端点击震动失效的三个隐藏原因
在 iOS Safari 或部分安卓 WebView 中，即使代码完全正确，震动也可能不出现。这不是 bug，而是渲染策略差异导致。
立即学习“前端免费学习笔记（深入）”；
- 缺少
cursor: pointer或touch-action: manipulation，iOS 会延迟或忽略非可点击区域的 active 状态 - 父容器有
overflow: hidden且子元素震动位移超出边界，动画会被裁剪（视觉上“消失”） - 未启用硬件加速：
transform: translateZ(0)或will-change: transform缺失时，某些低端设备可能跳过动画帧
震动动画不是炫技配件，它是用户操作反馈链里最廉价也最易被忽视的一环。只要位移值、事件绑定时机、移动端适配这三点没对齐，它就只是段安静的 CSS 文本。
