CSS动画如何实现元素抖动动效 利用CSS动画设置晃动频率与方向

CSS动画实现元素抖动动效主要依靠@keyframes规则定义关键帧动画，再通过animation属性将动画绑定到目标元素上，调整动画参数即可控制晃动的频率与方向。

核心实现原理

元素抖动的本质是让元素在水平或垂直方向做周期性的小幅位移，通过快速切换位移值模拟晃动效果。@keyframes用来定义动画在不同时间点的样式状态，animation属性则控制动画的播放时长、循环次数、速度曲线等参数。

基础抖动动效实现

先实现一个最简单的水平方向抖动动效，代码如下：

/* 定义抖动动画关键帧 */
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

/* 目标元素样式 */
.shake-element {
  width: 120px;
  height: 40px;
  background-color: #409eff;
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  /* 绑定动画：动画名 时长 速度曲线 循环次数 */
  animation: shake 0.5s ease-in-out 3;
}

对应的HTML结构为：

<div class="shake-element">点击触发抖动</div>

调整晃动频率

晃动频率由动画的animation-duration属性控制，也就是@keyframes动画完成一次完整播放的时长。时长越短，单位时间内播放的循环次数越多，视觉上的晃动频率就越高。

比如将动画时长从0.5s调整为0.2s，同样播放3次循环，晃动会显得更密集：

.fast-shake {
  animation: shake 0.2s ease-in-out 3;
}

也可以通过调整@keyframes内部的关键帧数量改变频率，比如增加更多位移节点，让单次动画的晃动次数更多，同样能提升频率。

调整晃动方向

晃动方向由关键帧中transform属性的位移方向决定，常用的方向调整方式有以下几种：

水平方向抖动

使用translateX控制水平位移，正值向右，负值向左，如上面的基础示例就是水平方向抖动。

垂直方向抖动

将translateX替换为translateY即可实现垂直方向抖动，代码如下：

@keyframes vertical-shake {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0);
  }
}

.vertical-element {
  width: 120px;
  height: 40px;
  background-color: #67c23a;
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  animation: vertical-shake 0.4s ease-in-out infinite;
}

多方向混合抖动

如果需要元素同时做水平和垂直方向的晃动，可以组合使用translateX和translateY：

@keyframes mixed-shake {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-8px, -5px);
  }
  40% {
    transform: translate(8px, 5px);
  }
  60% {
    transform: translate(-5px, 8px);
  }
  80% {
    transform: translate(5px, -8px);
  }
  100% {
    transform: translate(0, 0);
  }
}

常用参数说明

绑定动画时常用的animation属性参数整理如下：

实际应用场景示例

表单输入错误时的抖动提示是常见场景，可以结合JS触发动画，代码如下：

<input type="text" id="username" placeholder="请输入用户名">
<button onclick="checkInput()">提交</button>
<style>
  @keyframes error-shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
  }
  .error {
    animation: error-shake 0.4s ease-in-out;
    border: 1px solid #f56c6c;
  }
</style>
<script>
  function checkInput() {
    const input = document.getElementById('username');
    if (!input.value) {
      input.classList.add('error');
      // 动画结束后移除类，方便下次触发
      input.addEventListener('animationend', () => {
        input.classList.remove('error');
      }, { once: true });
    }
  }
</script>

通过这种方式可以快速实现符合需求的抖动动效，开发者可以根据实际设计调整位移幅度、时长、循环次数等参数，适配不同的交互场景。

CSS动画元素抖动晃动频率晃动方向keyframes修改时间：2026-06-30 04:42:38