如何控制CSS animation-timeline播放方向？

Question

**如何通过 CSS 控制 `animation-timeline` 的播放方向？** 在使用 CSS 的 `animation-timeline` 属性时，开发者常希望控制动画的播放方向，例如正向、反向或交替播放。然而，`animation-timeline` 本身仅用于指定动画的时间轴来源（如滚动进度），并不直接控制播放方向。 那么，如何结合其他 CSS 动画属性，如 `animation-direction`，来实现对绑定到时间轴的动画的播放方向控制？例如，如何让一个跟随滚动条移动的动画在回滚时反向播放？ 本课题将探讨如何在使用 `animation-timeline` 的同时，配合 `animation-direction` 及关键帧设计，灵活控制动画的播放方向，以实现更丰富的滚动驱动动画效果。

Answer 1

一、理解 `animation-timeline` 与播放方向的关系

animation-timeline 是 CSS Scroll-Driven Animations 模块中的一部分，用于将动画的时间轴绑定到滚动进度或其他时间源。例如：

.box {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timeline: scroll(root block);
}

这段代码将一个名为 slideIn 的关键帧动画绑定到了页面的垂直滚动条上。然而，animation-timeline 本身并不控制动画的方向。

二、使用 animation-direction 控制播放方向

animation-direction 是传统的 CSS 动画属性之一，用于控制动画在循环时的播放方向。其常用值包括：

• normal：默认方向，正向播放。
• reverse：反向播放。
• alternate：奇数次正向，偶数次反向。
• alternate-reverse：奇数次反向，偶数次正向。

当与 animation-timeline 结合使用时，animation-direction 同样会影响动画如何响应滚动进度的变化。

三、结合滚动驱动动画实现“回滚反向播放”效果

为了实现“滚动向下时正向播放，向上滚动时反向播放”的效果，我们可以利用浏览器对滚动方向变化的自然反应，并通过合理设计关键帧和方向控制来实现。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timeline: scroll(root block);
  animation-direction: normal; /* 初始为正向 */
}

虽然上述代码无法直接感知滚动方向，但可以通过 JavaScript 监听滚动事件并动态切换 animation-direction 来模拟“反向播放”。

四、JavaScript 辅助实现动态方向控制

由于 CSS 本身无法自动检测滚动方向，因此需要借助 JavaScript 实现方向的切换逻辑：

let lastScrollTop = 0;

window.addEventListener('scroll', () => {
  const currentScrollTop = window.scrollY;
  if (currentScrollTop > lastScrollTop) {
    document.querySelector('.box').style.animationDirection = 'normal';
  } else {
    document.querySelector('.box').style.animationDirection = 'reverse';
  }
  lastScrollTop = currentScrollTop;
});

此脚本根据用户滚动方向动态修改了动画的播放方向，从而实现了“滚动回退时反向播放”的视觉效果。

五、关键帧设计建议

要让方向切换更加自然，建议在关键帧中采用对称结构或渐进式过渡：

方向	关键帧结构建议
正向（normal）	从初始状态到最终状态
反向（reverse）	从最终状态回到初始状态

例如，若动画包含多个阶段，可以使用百分比定义更细致的动画步骤，使反向播放时不会出现突兀跳跃。

六、CSS 动画流程图示例

以下是一个 Mermaid 流程图，展示了滚动驱动动画中方向控制的逻辑：

graph TD
      A[开始滚动] --> B{滚动方向?}
      B -->|向下| C[设置 direction: normal]
      B -->|向上| D[设置 direction: reverse]
      C --> E[动画正向播放]
      D --> F[动画反向播放]