在网页交互设计中，震动提示效果是非常常见的需求，比如表单输入错误时输入框抖动、新消息提醒时图标震动等，这类效果可以通过CSS的animation属性配合keyframes规则实现，不需要依赖JavaScript就能完成元素持续抖动的效果。
实现震动效果的核心原理
CSS动画的实现依赖两个核心部分：@keyframes规则定义动画的关键帧状态，animation属性将定义好的动画绑定到目标元素上。要实现元素抖动效果，只需要在关键帧中不断修改元素的位移属性，比如transform的translateX或者rotate，让元素在多个状态之间快速切换，就能形成视觉上的震动效果。
基础震动效果实现步骤
1. 定义关键帧动画
首先通过@keyframes定义一个名为shake的动画，设置元素在不同时间点的位移状态，让元素在水平方向左右小幅移动：
/* 定义震动动画关键帧 */
@keyframes shake {
0% { transform: translateX(0); }
10% { transform: translateX(-5px); }
20% { transform: translateX(5px); }
30% { transform: translateX(-5px); }
40% { transform: translateX(5px); }
50% { transform: translateX(-3px); }
60% { transform: translateX(3px); }
70% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
90% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
2. 绑定动画到目标元素
定义好动画后，通过animation属性将动画绑定到需要抖动的元素上，设置动画持续时间、循环次数等参数：
/* 目标元素的样式 */
.shake-element {
width: 200px;
height: 50px;
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
/* 绑定震动动画：动画名 持续时间 循环次数 缓动函数 */
animation: shake 0.5s infinite linear;
}
对应的HTML结构如下：
<div class="shake-element">我是震动提示元素</div>
animation属性参数说明
animation是复合属性，也可以拆分为单个属性单独设置，各参数含义如下：
| 属性名 | 含义 | 常用取值 |
|---|---|---|
| animation-name | 指定要绑定的@keyframes动画名称 | 自定义的关键帧名称，如shake |
| animation-duration | 动画完成一个周期的时间 | 0.5s、1s等时间值 |
| animation-iteration-count | 动画循环次数 | infinite（无限循环）、具体数字 |
| animation-timing-function | 动画的缓动函数 | linear、ease、ease-in-out等 |
| animation-delay | 动画延迟启动的时间 | 0s、0.3s等时间值 |
不同场景的震动效果适配
1. 仅触发一次震动
如果只需要在某个状态触发一次震动，比如表单校验失败时，只需要将animation-iteration-count设置为1，或者去掉infinite参数：
.once-shake {
animation: shake 0.5s 1 linear;
}
2. 垂直方向震动
如果需要元素上下震动，只需要将关键帧中的translateX替换为translateY即可：
@keyframes vertical-shake {
0% { transform: translateY(0); }
25% { transform: translateY(-3px); }
50% { transform: translateY(3px); }
75% { transform: translateY(-3px); }
100% { transform: translateY(0); }
}
.vertical-shake-element {
animation: vertical-shake 0.4s infinite linear;
}
3. 带旋转的轻微震动
如果需要更自然的震动效果，可以结合旋转属性：
@keyframes rotate-shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-1deg); }
100% { transform: rotate(0deg); }
}
.rotate-shake-element {
animation: rotate-shake 0.3s infinite linear;
}
注意事项
- 震动幅度不要设置过大，一般水平位移控制在5px以内，避免影响页面布局和用户视觉体验
- 如果元素本身有
transform属性，需要注意动画中的transform会覆盖原有属性，建议将原有transform属性整合到关键帧中 - 不需要震动时可以给元素添加
animation: none;来停止动画，减少浏览器性能消耗
震动提示效果适合用于需要强提醒的场景，不要给过多元素添加持续震动效果，否则会让页面显得杂乱，干扰用户正常操作。
CSS_animation震动提示效果元素抖动keyframes修改时间：2026-06-23 04:27:30