CSS关键帧动画点击控制按钮无法反向回退播放如何解决

原有方案失效原因 #

你之前写的两种方案失效都是因为动画触发逻辑有问题：

• 直接设置animationDirection = 'reverse'无效：元素只有挂载了animation相关属性时，方向修改才会生效，单纯改方向不会触发动画重新播放，动画如果已经播完停在终态，改方向也不会有任何变化。
• 直接移除active类无效：移除类后元素的animation属性会直接消失，元素会瞬间跳回CSS定义的初始状态，没有过渡动画过程。

可运行实现代码 #

核心逻辑是把动画直接绑定在目标元素上，默认保持暂停状态，通过按钮控制动画方向和播放状态，实现平滑的正反向移动：

<!-- HTML结构保持不变 -->
<button id="left">&lt;</button>
<button id="right">&gt;</button>
<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  /* 直接绑定移动动画，默认暂停，动画结束保持终态 */
  animation: move 1s forwards paused;
}

@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

const box = document.querySelector('.box');

document.getElementById('right').addEventListener('click', () => {
  // 设置动画方向为正向，启动播放
  box.style.animationDirection = 'normal';
  box.style.animationPlayState = 'running';
});

document.getElementById('left').addEventListener('click', () => {
  // 设置动画方向为反向，启动播放
  box.style.animationDirection = 'reverse';
  box.style.animationPlayState = 'running';
});

// 动画播放结束后切回暂停状态，避免重复点击出现状态冲突
box.addEventListener('animationend', () => {
  box.style.animationPlayState = 'paused';
});

实现说明 #

• 动画常驻在.box上，避免增删类导致的动画属性丢失、元素样式跳变问题。
• 动画默认暂停，点击按钮时只需要修改方向、切换为播放状态，动画就会从当前停留的位置开始往对应方向平滑运动。
• 动画播放完成后自动切回暂停，重复点击按钮不会出现动画跳帧、播放错位的问题。

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