真正可用的抖动是沿x轴小幅高频非对称位移，用translatex()定义至少4个关键帧（0%/25%/50%/100%），0%和100%均为translatex(0)，配合合理easing模拟惯性回弹。
抖动动画用 @keyframes 定义，别直接改 transform: rotate()
纯 CSS 抖动不是靠来回旋转实现的，那样看起来像抽搐，也不自然。真正可用的抖动是沿 X 轴做小幅、高频、非对称的位移，配合 easing 模拟惯性回弹。关键帧里必须用 translateX()，且至少定义 4 个节点（0% → 25% → 50% → 100%），否则浏览器渲染会跳帧或卡顿。
-
0%和100%必须都是translateX(0)，保证动画可循环且不偏移 - 中间点建议用
translateX(-5px)→translateX(3px)→translateX(-2px)这类不对称值，比 ±5px 更像真实抖动 - 避免在
@keyframes里写rotate()或scale()，它们会干扰视觉重心，让元素“飘”起来
触发抖动要靠 animation 属性，但不能写死在初始 class 上
元素一加载就抖？那不是提示，是 bug。抖动应该是响应式反馈，比如表单校验失败、按钮点击失败、拖拽释放越界等场景。所以动画声明得分离：基础样式里不写 animation，只在 JS 触发条件满足时，动态加一个带动画的 class。
- 写死在
.input-error里：元素一渲染就抖，用户还没输完就抖，体验极差 - 正确做法是定义
.shake-trigger类，里面只放animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) - JS 中用
element.classList.add('shake-trigger')触发，再监听animationend自动移除，避免重复叠加 - 别用
animation-iteration-count: infinite，抖一次就够了，重复会引发恶心感
兼容性坑：Safari 15.4 之前不支持 cubic-bezier 超出 [0,1] 范围
你抄来的缓动曲线 cubic-bezier(.36,.07,.19,.97) 在 Chrome/Firefox 没问题，但在旧版 Safari 会退化成 linear，抖动变生硬。这是因为 Safari 对贝塞尔控制点坐标的校验更严格，y 值超出 [0,1] 就直接丢弃整条曲线。
- 查 MDN 确认目标环境 Safari 版本，低于 15.4 就得换方案
- 稳妥替代：用
ease-out或steps(2, end)（后者适合机械式短抖） - 如果必须用自定义贝塞尔，确保所有 y 值在 0–1 之间，比如
cubic-bezier(.36,0,.19,1) - 别依赖
prefers-reduced-motion自动禁用——很多用户根本没开这个系统设置，该抖还是抖
性能警告：transform 抖动也会上 GPU，但别在长列表里批量触发
单个元素抖动没问题，transform 是合成层友好操作。但如果在表格每行都加 shake-trigger，或者滚动中持续触发，GPU 内存占用会飙升，低端机可能掉帧甚至白屏。
- 检查是否真需要「每个元素独立抖」：多数情况只需高亮首个错误项，其余用文字提示
- 批量抖动前加节流，比如 300ms 内只执行一次，用
setTimeout+ 标志位控制 - 避免在
scroll或resize事件里触发动画，这类事件太频繁 - 用 Chrome DevTools 的 Rendering 面板勾选 “FPS Meter”，实测抖动期间是否跌破 50fps
animation-fill-mode: forwards 都不认，抖完会闪回原位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
