CSS实现抖动效果需定义@keyframes使元素在±4px间高频小幅位移，配合0.4s～0.6s时长、2～4次循环及ease-in-out函数；JS控制class增删防叠加，并适配prefers-reduced-motion。
用 CSS animation 实现元素“抖动”或“震动”提示效果，核心是让元素在水平方向（x轴）快速、小幅位移，配合短周期和高重复次数，营造出视觉上的震动感。关键不在“抖”，而在“有控制地晃”——幅度小、频率高、持续时间短，否则容易引起不适。
定义震动动画的关键帧
使用 @keyframes 定义一个左右偏移的循环动画。常见做法是让元素在 -4px 到 +4px 之间来回移动，避免使用过大值（如 ±10px），否则像“弹跳”而非“震动”：
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-4px); }
50% { transform: translateX(4px); }
75% { transform: translateX(-4px); }
100% { transform: translateX(0); }
}
这个写法比简单用 0%, 100% 两帧更自然，中间加入多个停顿点能增强节奏感，避免机械感。
应用动画并控制触发行为
给目标元素（比如表单输入框、按钮）添加动画，并设置合理时长与次数。典型配置：
立即学习“前端免费学习笔记（深入）”；
- duration：0.4s～0.6s（太短看不出，太长像摇晃）
-
iteration-count：2～4 次（一般用
2或infinite配合 JS 控制停止） -
timing-function：用
ease-in-out或linear，避免ease造成开头结尾拖沓 -
fill-mode：建议加
forwards，确保最后一帧状态保留（可选）
.input-error {
animation: shake 0.5s ease-in-out 2;
}
配合 JavaScript 精准触发和复位
纯 CSS 动画一旦添加 class 就会执行，但实际场景中常需“验证失败时抖一下，用户修改后停止”。这时要用 JS 控制 class 的增删，并注意避免连续多次触发导致动画叠加：
- 添加 class 前先移除旧的：
el.classList.remove('shake-active') - 用
setTimeout或animationend事件清理 class，防止样式残留 - 可加防抖逻辑：比如 1 秒内只触发一次震动
input.addEventListener('blur', () => {
if (!isValid(input.value)) {
input.classList.remove('shake-active');
void input.offsetWidth; // 强制重排，重置动画
input.classList.add('shake-active');
}
});
增强可用性的小细节
震动是强视觉反馈，对部分用户可能引发眩晕。建议：
- 仅用于错误提示等必要场景，非装饰性使用
- 支持系统减少动画偏好：
@media (prefers-reduced-motion: reduce)中禁用该动画 - 搭配其他反馈，如红边框、文字提示、图标变化，别只靠震动
@media (prefers-reduced-motion: reduce) {
.shake-active {
animation: none;
}
}
