csshake需手动添加shake类名才能触发抖动动画，常见错误是仅引入css文件却未在html中绑定对应class。
抖动动画不触发？检查 class 是否正确绑定
CSShake 不是自动扫描页面加动画的库，必须手动给元素加上对应 shake 类名（或其变体），否则什么都不会发生。常见错误是只引入了 CSS 文件，但忘了在 HTML 里写 class="shake"。
使用场景：按钮悬停反馈、表单校验失败提示、操作失败后的视觉强调。
-
shake是最基础版本，循环一次后停止 - 需要持续抖动？用
shake-loop（注意性能开销） - 移动端触摸后抖动失效？补上
cursor: pointer或监听touchstart触发重绘 - 抖动幅度太小？CSShake 默认用
transform: translate()，若父容器有overflow: hidden，可能裁掉动画边缘——改用shake-slow或自定义 keyframes 更稳妥
引入后样式冲突？优先级和作用域问题
CSShake 的动画依赖 @keyframes shake 和大量 .shake 相关类，如果项目用了 Tailwind、Bootstrap 或自定义 reset，容易被覆盖或重置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 CSShake 的
csshake.min.css在其他 CSS 之后加载（尤其在<head>中靠后位置） - 避免用
!important覆盖它——改用更具体的选择器，比如.my-form .error-input.shake - 如果你用的是构建工具（Vite/Webpack），别直接
@import它的 SCSS；改用编译后 CSS，或手动提取 keyframes 到项目中统一管理 - 发现抖动卡顿？检查是否同时启用了
will-change: transform——CSShake 没默认加，但加了反而可能触发过多图层合成，得看设备性能
想自定义抖动方向或频率？别改源码，复用 keyframes
CSShake 提供了多个预设类（如 shake-horizontal、shake-constant），但不支持运行时传参。真要微调，得自己抄一份 @keyframes 并改 transform 值。
为什么这样做：
- 源码里的 keyframes 名称固定为
shake，浏览器缓存后改文件名也不生效，必须改内容 - 水平抖动比垂直抖动更常用，因为人眼对横向位移更敏感；但
shake-vertical在表单错误提示中其实更自然（模拟“摇头”拒绝） - 频率太高（如
0.1s一帧）在低端安卓机上会掉帧；建议保持在0.2s–0.3s区间 - 示例：复制
@keyframes shake-horizontal，把translateX(-5px)改成translateX(-8px)，再另起一个类.shake-aggressive绑定它
React/Vue 里动态控制抖动？别用 classList 切换，用 key 强制重渲染
在框架中频繁增删 shake 类，容易因 DOM 复用导致动画不触发（尤其是 Vue 的 v-if 或 React 的条件渲染）。CSS 动画依赖 class 存在时的“进入”时机，不是纯 CSS 切换就能重播。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- React：用
key控制，比如<div key={shaking ? Date.now() : 'static'} className="shake"> - Vue：配合
:key+v-show，避免v-if卸载节点；或者用$nextTick手动触发 reflow - 不要用
setTimeout清除 class 后立刻加回去——浏览器没来得及重绘，动画就丢了；至少间隔一帧（requestAnimationFrame） - SSR 场景下，服务端渲染时 class 已存在，首屏抖动不会播；需在
useEffect或mounted钩子中延迟添加
真正难的不是让元素抖起来，而是判断什么时候该抖、抖多久、抖完要不要留个视觉余量——比如表单错误后抖一下，紧接着滚动到错误字段，这个衔接稍不注意，用户就会觉得“卡”或者“没反应”。
