真正可用的抖动是沿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] 就直接丢弃整条曲线。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能