按钮CSS左右快速往复停顿动画实现问题求助

你的需求是让按钮快速左右移动、停顿后重复，原代码只实现了单向移动，没有反向和停顿逻辑，我来帮你调整出符合预期的效果：

核心问题分析 #

原动画仅定义了从left:0到left:10px的单向过渡，缺少反向移动的关键帧，也没有设置停顿阶段，所以无法实现「往返移动+停顿重复」的完整动作。

优化后的完整代码 #

<button>value</button>

<style>
button {
  background: red;
  position: relative;
  /* 统一动画属性，现代浏览器无需额外webkit前缀（兼容老旧Safari可自行添加） */
  animation: moveBackForth 1s infinite;
}

@keyframes moveBackForth {
  /* 初始位置 */
  0% {
    left: 0px;
  }
  /* 快速右移到目标位置（前40%时间完成移动） */
  40% {
    left: 10px;
  }
  /* 停顿阶段（中间20%时间保持当前位置） */
  60% {
    left: 10px;
  }
  /* 快速左移回初始位置（最后40%时间完成移动） */
  100% {
    left: 0px;
  }
}
</style>

关键调整说明 #

• 多阶段关键帧设计：通过0%/40%/60%/100%四个时间节点，拆分出「右移→停顿→左移」的完整动作流程
• 时间比例控制：把40%的动画时长分配给移动（左右各占一半），20%时长留给停顿，保证动作快速且有明显的停顿间隔
• 简化冗余代码：现代主流浏览器已支持标准animation和@keyframes语法，无需保留-webkit-前缀（若需兼容极老旧Safari版本可重新添加）
• 灵活参数调整：你可以按需修改left的目标值（比如改成20px增大移动幅度），或者调整关键帧的百分比来改变移动速度、停顿时长

内容的提问来源于stack exchange，提问作者user9192087