CSS动画能否逆向播放 日常维护方法与实用案例

网页上的动画效果越来越常见，比如按钮点击时的缩放、页面加载时的淡入淡出。有时候我们希望动画不仅能正着放，还能倒着播，就像视频倒放一样自然。那CSS动画能不能实现逆向播放呢？答案是肯定的。

用 animation-direction 控制播放方向

CSS 提供了一个属性叫 animation-direction，专门用来控制动画的播放方向。它有几个常用值，其中最常用的是 normal 和 reverse。

比如你有一个元素从左往右滑动的动画：

.slide {
  animation-name: move;
  animation-duration: 1s;
}

@keyframes move {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

如果想让它从右往左反向滑动，只需要加上 animation-direction: reverse;：

.slide {
  animation-name: move;
  animation-duration: 1s;
  animation-direction: reverse;
}

这样一来，原本从 0 到 100px 的位移就变成了从 100px 回到 0，实现了“倒放”效果。

让动画来回播放更自然

实际开发中，我们经常需要一个动画来回动，比如一个弹跳的小球。这时候可以用 alternate 或 alternate-reverse。

比如设置 animation-direction: alternate，动画在奇数次正向播放，偶数次自动反向播放：

.bounce {
  animation: jump 0.5s alternate infinite;
}

@keyframes jump {
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
}

这个小球就会一下跳起来，一下落回去，循环往复，看起来就像在持续弹跳。

结合 JavaScript 动态切换方向

有些场景下，用户操作决定了动画方向。比如点击一次按钮向右滑，再点一次向左滑。这时候可以用 JavaScript 动态添加或修改类名来控制方向。

<div class="box"></div>

.box {
  width: 50px;
  height: 50px;
  background: blue;
  position: relative;
  left: 0;
  animation: slide 1s forwards;
}

@keyframes slide {
  to { left: 200px; }
}

.reverse {
  animation-direction: reverse;
}

const box = document.querySelector('.box');
box.addEventListener('click', function() {
  this.classList.toggle('reverse');
});

每次点击，就会切换是否反向播放，实现来回滑动的效果。

注意关键帧的定义方式

想要动画能正确逆向播放，关键帧（@keyframes）最好使用 from 和 to，或者明确写出 0% 和 100%。这样浏览器才知道怎么“倒着走”。

如果用了中间状态，比如 50% 旋转一下，反向播放时也会按原路径倒回来，不会跳过中间步骤。

所以，CSS 动画不仅可以逆向播放，还能灵活控制来回、交替等效果，用好 animation-direction 就能让页面动效更生动。