如何实现表单校验失败时的抖动动画_利用CSS keyframes关键帧-css教程-PHP中文网

抖动动画必须用 transform: translatex() 实现，配合 @keyframes shake 定义四状态关键帧，首尾为 0；校验失败时立即给错误元素添加 shake 类并监听 animationend 清理，避免样式覆盖、duration 为 0 或 overflow 隐藏等问题。

如何实现表单校验失败时的抖动动画_利用css keyframes关键帧

抖动动画该用什么 CSS 属性控制

抖动本质是水平位移的快速往复，必须用 transform: translateX() 实现，不能用 margin 或 left。前者触发 GPU 加速、无重排、性能可控；后两者会引发布局计算，连续抖动时容易卡顿甚至掉帧。

关键帧定义要覆盖「起始 → 右偏 → 左偏 → 回中」四个状态，且首尾必须都是 translateX(0)，否则动画结束后元素会停留在偏移位置，影响下一次校验或用户操作。

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(4px); }
  50% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

怎么在表单校验失败时触发这个动画

不要监听 submit 后手动加 class——那会延迟反馈。应该在调用校验逻辑（比如 checkValidity() 或自定义验证函数）得到 false 结果的**同一时刻**，给对应表单项添加抖动类。

常见错误是直接对整个 form 元素加动画，实际应精准作用于出错的 input、select 或其包裹容器（如 .form-group），否则视觉干扰过大，且无法聚焦问题字段。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

使用 element.classList.add('shake') 触发动画
动画结束后立刻用 element.addEventListener('animationend', () => element.classList.remove('shake')) 清理 class，避免重复点击多次叠加 class 导致动画异常
若校验是异步的（如接口校验用户名是否已存在），需确保动画在拿到失败响应后再执行，不能在请求发出时就抖

为什么加了动画但没看到抖动

最常踩的坑是：CSS 动画被其他样式覆盖，或触发条件不满足。检查以下几点：

animation-name 拼写错误，比如写成 shak 或大小写不一致（CSS 对动画名大小写敏感）
缺少 animation-duration，默认为 0s，动画瞬间完成不可见
目标元素设置了 transform: scale(1) 等其他 transform，会覆盖 translateX，需合并写法：transform: scale(1) translateX(0)
父容器有 overflow: hidden，而抖动位移超出容器边界，导致部分帧被裁剪——可临时加 outline: 1px solid red 边框辅助排查