抖动动画必须用 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 一下+单次）用户感知不到。实测较稳妥的组合是：
立即学习“前端免费学习笔记（深入）”；
@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），这会让样式计算混乱
抖动不是炫技，是反馈信号——它得稳、准、快。动画参数和触发时机稍有偏差，用户第一反应不是“错了”，而是“页面卡了”。
