CSS如何制作抖动提示错误表单的动画-css教程-PHP中文网

应使用@keyframes配合animation实现表单抖动，避免transform过渡残留；关键帧需覆盖完整周期（如0%→25%→50%→75%→100%），幅度±4px~±8px，时长0.4s，加animation-fill-mode:forwards，并动态切换shake类或用element.animate()触发。

css如何制作抖动提示错误表单的动画

用 `animation` 实现表单抖动，别碰 `transform: translate()` 的过渡残留

抖动动画本质是水平位移的快速往复，但直接写 transform: translateX(5px) 再加 transition 会卡顿、不干脆，甚至在 Safari 上抖不动。必须用 @keyframes 配合 animation，且关键帧要覆盖完整周期（比如 0% → 25% → 50% → 75% → 100%），避免浏览器插值补间出意外偏移。

常见错误现象：只写两个关键帧（0% 和 100%），导致动画“滑”过去，不是“弹”；或者用了 ease-in-out 缓动，削弱了抖动的警示感。

抖动幅度建议控制在 ±4px 到 ±8px 之间，太大显得滑稽，太小用户注意不到
持续时间设为 0.4s 左右，太快看不出，太慢削弱紧迫感
务必加 animation-fill-mode: forwards，否则动画播完会弹回原位，视觉上像“抽搐”而非“提示”

给 input 添加抖动类时，别忘了清除旧动画再触发新动画

连续多次提交失败，如果只是反复加同一个 shake 类，浏览器可能跳过重绘——因为类没变，CSS 认为无需重播动画。必须先移除再添加，或用强制重排（不推荐）。

使用场景：表单校验失败后调用抖动，比如 input.addEventListener('invalid', ...) 或手动 checkValidity() 后触发。

推荐做法：element.classList.remove('shake'); void element.offsetWidth; element.classList.add('shake');
更稳妥的封装：用 element.animate() API 直接播放，不依赖 class 切换（兼容性需查 CanIUse，Chrome/Firefox/Edge 90+ 没问题）
别在 :invalid 伪类里直接写动画——它不触发重排，且无法控制触发时机

IE 不支持 `@keyframes` 动画？那就用 JS fallback 模拟抖动

IE10+ 支持 @keyframes，但 IE9 及以下完全不支持。如果项目还必须兼容 IE9，别硬塞 CSS 动画，改用 JS 手动设置 style.left 或 style.transform 并用 setTimeout 控制节奏。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

性能影响：JS 模拟抖动会频繁触发重排，比 CSS 动画消耗高；但 IE9 本就无硬件加速，差别不大。

简单 fallback 示例：

function shake(el) {
  let pos = 0;
  const steps = [0, 4, -4, 4, -2, 0];
  const timer = setInterval(() => {
    el.style.transform = `translateX(${steps[pos]}px)`;
    pos++;
    if (pos >= steps.length) {
      clearInterval(timer);
      el.style.transform = '';
    }
  }, 60);
}