CSS动画能不能倒着放？教你轻松实现反向播放效果

做网页时经常遇到这种需求：一个元素动起来很顺，但想让它收回去的时候原路返回，就像厨房里推拉门开合一样自然。比如一个按钮点击后展开菜单，关闭时希望它不是突然消失，而是按原来的路径缩回去。这时候就会想到——CSS动画能不能逆向播放？答案是能，而且方法挺简单。

用 animation-direction 控制方向

CSS 有个属性叫 animation-direction，专门管动画的播放方向。默认是正向播放，也就是 normal。如果想让它倒着来，可以设成 reverse。

.slide-in {
  animation-name: slide;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.slide-out {
  animation-name: slide;
  animation-duration: 0.5s;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}

@keyframes slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

上面这段代码里，.slide-in 是从左往右滑入，而 .slide-out 加了 animation-direction: reverse，就变成了从右往左滑出，相当于原路返回。

实际场景：做个可收起的菜谱栏

想象你在做一个厨房小助手页面，侧边有个菜谱列表，默认隐藏，点一下“显示步骤”就滑出来，再点一下“收起”，它就得原路滑回去。这时候就可以用两个类分别控制进出状态。

HTML 结构大概是这样：

<div class="recipe-panel" id="panel"></div>
<button onclick="togglePanel()">切换菜谱</button>

JS 控制类名切换：

function togglePanel() {
  const panel = document.getElementById('panel');
  if (panel.classList.contains('slide-in')) {
    panel.classList.remove('slide-in');
    panel.classList.add('slide-out');
  } else {
    panel.classList.remove('slide-out');
    panel.classList.add('slide-in');
  }
}

这样一来，展开和收回的动作就是互为逆向的，视觉上特别顺滑，不像有些页面收起来直接“咔”一下没了，用户体验差很多。

注意关键帧要对称

要想 reverse 真正生效，你的 @keyframes 定义得合理。比如 from 和 to 要有明确起点终点，不然倒过来播会乱套。就像炒菜，步骤清楚才能回锅补救，要是乱加料，想挽回也难。

还有一个小技巧：如果你只想用一个类实现来回动画，可以用 animation-direction: alternate 或 alternate-reverse，适合循环播放的场景，比如 loading 指示条来回跑。

不过对于开关类交互，还是推荐分开控制，逻辑更清晰，调试也方便。