抖动动画必须用 transform: translateX() 实现，禁用 margin 或 left；仅在失焦校验失败时动态添加 .shake 类触发动画；推荐参数：0.35s ease-in-out 的 shake 动画，位移±6px/±4px，执行1次。

抖动动画该用哪个CSS属性控制

抖动本质是元素在水平方向快速位移再复位，必须用 transform: translateX() 实现，不能用 margin 或 left。前者触发 GPU 加速、性能好、不影响文档流；后两者会引发重排，连续抖动时卡顿明显，且可能干扰 Bootstrap 表单控件的默认定位逻辑。

Bootstrap 本身不提供抖动类，得自己写 @keyframes，并绑定到校验失败的状态上（比如 .is-invalid）。

如何让抖动只在表单控件失焦校验失败时触发

直接给 .is-invalid 加 animation 会导致一渲染就抖——这不符合交互预期。正确做法是：只在用户操作后（如失去焦点或提交失败）动态添加一个临时类（比如 .shake），再用该类触发动画。

• 用 JavaScript 监听 blur 事件，检查 element.checkValidity() === false，满足则添加 .shake
• 动画结束后用 animationend 事件自动移除 .shake，避免重复点击持续叠加动画
• 别对 .form-control.is-invalid 直接加 animation，否则初始渲染或服务端返回错误时也会抖

抖动动画参数怎么设才不晕又有效

太猛（位移大+次数多）让人不适，太弱（10px 一下+单次）用户感知不到。实测较稳妥的组合是：

CSS工具箱(专业版)

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

下载

• @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }
• 动画时长控制在 0.35s，ease-in-out 缓动，比线性更自然
• 只运行一次：animation: shake 0.35s ease-in-out 1;
• 确保 .shake 类的优先级高于 Bootstrap 默认样式，必要时加 !important（仅限 animation 属性）

为什么 input:focus 下抖动会失效或错位

当输入框获得焦点时，浏览器可能正在绘制光标或高亮背景，此时若同时执行 transform 动画，部分浏览器（尤其是旧版 Safari 和某些 Android WebView）会出现抖动偏移、闪烁甚至动画跳帧。

规避方式很简单：

• 在 .shake 的 CSS 规则里显式重置 outline: none（防止抖动时 outline 位移加重错觉）
• 加一句 will-change: transform; 提前告知浏览器该元素将动画，提升合成层稳定性
• 绝不把 .shake 和 :focus 同时作用于同一元素做复合选择器（如 .form-control.shake:focus），这会让样式计算混乱

抖动不是炫技，是反馈信号——它得稳、准、快。动画参数和触发时机稍有偏差，用户第一反应不是“错了”，而是“页面卡了”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！