在网页交互里，元素震动特效常用于表单校验失败、操作有误等场景，通过短暂的视觉抖动引起用户注意。纯CSS实现该效果不依赖脚本，渲染由浏览器合成线程处理，流畅度有保障。下面我们从基础概念讲到完整示例。
一、震动特效的底层原理
CSS动画由@keyframes定义关键帧序列，每一帧描述元素在某个时间点的样式状态。浏览器会在动画周期内自动补全帧间过渡。震动本质上是让元素在极短时间内沿水平或垂直方向反复位移，利用人眼对突发运动的敏感形成抖动感。
位移一般使用transform: translateX()或translateY()，避免改动left、top触发重排。震动动画通常设置较短的持续时间，例如0.3秒到0.6秒，并采用ease-in-out缓动使起止更自然。理解这点后，我们便能着手编写代码。
1.1 为什么不用JavaScript控制样式
用脚本循环修改样式虽然灵活，但容易阻塞主线程，且在频繁触发时产生卡顿。CSS动画交由合成层处理，主线程仅负责启动，运行阶段开销极低。对于单纯视觉反馈，CSS是更轻量的选择。
此外CSS动画可复用性强，一个类名就能套用到任意元素，配合伪类或状态切换即开即停，后期调整幅度只需改一处的帧值。
二、编写基础震动动画
我们先定义一个名为shake的关键帧，在多个百分比节点上给出左右交替的偏移。注意帧点越密，抖动越细腻；点距过大则像滑动而非震动。
/* 定义水平震动关键帧 */
@keyframes shake {
0% { transform: translateX(0); }
10% { transform: translateX(-6px); }
20% { transform: translateX(6px); }
30% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
50% { transform: translateX(-4px); }
60% { transform: translateX(4px); }
70% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
90% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
/* 将动画应用到类 */
.shake-box {
animation: shake 0.4s ease-in-out;
}
上面代码中，元素在百分之十到四十阶段大幅度左右摆，之后幅度递减，模拟震动衰减。时间设为零點四秒，缓动让首尾平滑。你可以直接把shake-box类加到任意标签上观察效果。
若希望垂直震动，只需把translateX换成translateY，原理完全一致。某些场景还可混合两个轴向，例如translate(4px, -3px)形成斜向抖动，增强杂乱感。
2.1 控制动画只播放一次
默认动画播完会停在最后一帧，由于末帧位移为零，元素回归原处。如果不希望重复，确保animation-iteration-count为1，上面简写已隐含此值。需要循环提醒时可设为infinite，但滥用会让用户烦躁。
也可通过animation-fill-mode设定前后状态，震动类通常用默认值即可，不必额外声明。
三、结合交互触发特效
静止页面里元素带着动画类会一加载就抖，这并非我们想要的。常见做法是用JavaScript在校验失败时添加类名，延时移除，使下次还能再触发。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
@keyframes shake {
0% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(8px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
100% { transform: translateX(0); }
}
.run-shake {
animation: shake 0.5s ease-in-out;
}
.field {
width: 200px;
padding: 8px;
border: 1px solid #999;
}
</style>
</head>
<body>
<input class="field" id="username" placeholder="输入用户名">
<button onclick="check()">提交</button>
<script>
function check() {
var el = document.getElementById('username');
if (el.value.trim() === '') {
el.classList.remove('run-shake');
// 强制重排以重新触发动画
void el.offsetWidth;
el.classList.add('run-shake');
setTimeout(function () {
el.classList.remove('run-shake');
}, 500);
}
}
</script>
</body>
</html>
示例中按钮点击后若输入框为空，便通过移除再添加类名并强制重排来重启动画。定时器在动画结束后清理类名，保证状态干净。这种写法兼容性好，不依赖任何库。
如果你使用前端框架，如Vue或React，可用数据状态绑定类名，逻辑更清晰，但底层仍是同一套CSS规则。
3.1 使用伪类触发
纯CSS也能在特定交互时震动，例如输入框获得焦点却无效时利用:invalid配合其他选择器。不过伪类难以表达“仅抖一次”的时序，多适用于持续提示。简单场景可用下面规则：
input:focus:invalid {
animation: shake 0.4s ease-in-out;
}
该写法在焦点位于非法字段时循环触发，离开后停止。虽不够精细，但零脚本，适合静态页。
四、参数调整与兼容性
震动幅度建议控制在二到十像素。过小用户无感，过大像元素错位。持续时间宜短，零点三到零点六秒足够，过长干扰阅读。缓动函数选ease-in-out或linear均可，前者更柔和。
现代浏览器均支持@keyframes与transform，包括移动端。若需兼容极旧版本，可加-webkit-前缀，但当下已非必需。下表列出常用参数组合：
| 场景 | 幅度 | 时长 | 迭代次数 |
|---|---|---|---|
| 表单报错 | 6px | 0.4s | 1 |
| 按钮误触 | 4px | 0.3s | 1 |
| 持续提醒 | 3px | 0.5s | infinite |
合理选用数值能兼顾体验与性能。最后提醒，震动不应作为唯一提示方式，需配合文字或颜色变化，照顾 vestibular 障碍用户。