CSS `Scroll-timeline-axis` / `scroll-timeline-name` (提案) 驱动多轴动画

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊CSS里一个挺有意思的提案——scroll-timeline-axis 和 scroll-timeline-name，它能让咱们的动画跟着滚动条“翩翩起舞”，而且是多轴联动的那种，想想是不是有点小激动？ 别急，咱们一步一步来，保证让各位听明白，学得会，用得上！

一、 啥是Scroll-driven Animations？

在深入scroll-timeline-axis和scroll-timeline-name之前，咱们先得弄清楚Scroll-driven Animations是啥玩意儿。简单来说，它就是让你的CSS动画不再依赖于animation-duration和animation-iteration-count这些属性，而是直接跟浏览器的滚动行为挂钩。也就是说，你滚动鼠标滚轮，动画就跟着动，滚动得快，动画也快，滚动得慢，动画也慢，简直不要太酷炫！

二、 传统的Scroll-driven Animations：单轴起舞

以前，想要实现Scroll-driven Animations，主要依赖于scroll-timeline和view-timeline这两个属性。

• scroll-timeline： 让动画基于整个文档的滚动条来驱动。
• view-timeline： 让动画基于某个特定元素的可见性来驱动。

这两个属性都很好用，但它们有个共同的局限：只能基于单轴滚动条驱动动画。也就是说，要么是垂直滚动条，要么是水平滚动条，二者只能选其一。 如果你想让一个动画同时响应垂直和水平滚动，那就比较麻烦了，得用JavaScript来手动计算和控制，代码写起来又臭又长，维护起来也让人头大。

三、 scroll-timeline-axis 和 scroll-timeline-name：双剑合璧，多轴联动

好了，重头戏来了！scroll-timeline-axis和scroll-timeline-name这两个属性的出现，就是为了解决单轴滚动的限制，让我们能够轻松实现多轴联动动画。

• scroll-timeline-axis： 指定动画应该基于哪个滚动轴来驱动。它可以取以下几个值：

  • block：基于块级轴滚动（通常是垂直滚动）。
  • inline：基于行内轴滚动（通常是水平滚动）。
  • vertical：强制基于垂直滚动。
  • horizontal：强制基于水平滚动。
  • both：同时基于垂直和水平滚动。 这是关键！

• scroll-timeline-name： 给滚动时间线起个名字，方便我们在animation-timeline属性里引用。

四、 代码实战：让元素跟着滚动条“跑”

光说不练假把式，咱们直接上代码，看看scroll-timeline-axis和scroll-timeline-name是如何大显身手的。

4.1 基础HTML结构

首先，我们需要一个基本的HTML结构，包含一个滚动容器和一个需要动画的元素。

<div class="container">
  <div class="animated-element"></div>
</div>

4.2 CSS样式

接下来，我们给容器和动画元素添加一些样式。

.container {
  width: 500px;
  height: 500px;
  overflow: auto; /* 关键：让容器可以滚动 */
  position: relative; /* 关键：为绝对定位的动画元素提供定位上下文 */
  background-color: #eee;
}

.animated-element {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute; /* 关键：绝对定位，才能自由移动 */
  top: 0;
  left: 0;
}

4.3 核心代码：多轴联动动画

现在，让我们来添加核心的CSS代码，让动画元素跟着滚动条“跑”起来。

.container {
  scroll-timeline-name: myScrollTimeline; /* 给滚动时间线起个名字 */
  scroll-timeline-axis: both; /* 指定基于垂直和水平滚动轴 */
}

.animated-element {
  animation: moveElement auto linear forwards; /* 关键：使用animation属性 */
  animation-timeline: myScrollTimeline; /* 指定动画的时间线 */
  animation-range: entry 0% cover 100%; /*动画范围*/
}

@keyframes moveElement {
  from {
    transform: translate(0, 0); /* 初始位置 */
  }
  to {
    transform: translate(450px, 450px); /* 最终位置 */
  }
}

代码解释：

1. .container：
   • scroll-timeline-name: myScrollTimeline;： 给容器的滚动时间线命名为myScrollTimeline。
   • scroll-timeline-axis: both;： 告诉浏览器，这个时间线要同时基于垂直和水平滚动轴。
2. .animated-element：
   • animation: moveElement auto linear forwards;： 定义了一个名为moveElement的动画，auto让浏览器自动计算动画持续时间，linear表示线性动画，forwards表示动画结束后保持在最后一帧。
   • animation-timeline: myScrollTimeline;： 指定动画的时间线为我们刚刚定义的myScrollTimeline。
   • animation-range: entry 0% cover 100%;： 控制动画的触发范围。entry 0%表示元素进入视口0%时开始动画，cover 100%表示元素覆盖整个视口时结束动画。
3. @keyframes moveElement：
   • 定义了一个名为moveElement的关键帧动画，让元素从左上角移动到右下角。

效果：

当你滚动容器的滚动条时，红色的.animated-element元素会从左上角平滑地移动到右下角，而且移动的速度和方向会随着你的滚动而变化，实现了真正的多轴联动动画！

五、 进阶玩法：更复杂的动画效果

上面的例子只是一个简单的平移动画，咱们还可以玩出更多花样，比如旋转、缩放、透明度变化等等。

5.1 旋转动画

@keyframes rotateElement {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animated-element {
  animation: rotateElement auto linear forwards;
  animation-timeline: myScrollTimeline;
  animation-range: entry 0% cover 100%;
}

5.2 缩放动画

@keyframes scaleElement {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

.animated-element {
  animation: scaleElement auto linear forwards;
  animation-timeline: myScrollTimeline;
  animation-range: entry 0% cover 100%;
}

5.3 透明度动画

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

.animated-element {
  animation: fadeElement auto linear forwards;
  animation-timeline: myScrollTimeline;
  animation-range: entry 0% cover 100%;
}

你可以将这些动画效果组合起来，创造出更加炫酷的滚动驱动动画。

六、 view-timeline 的多轴联动

scroll-timeline 针对整个文档，而 view-timeline 针对特定元素的可视区域。 它们都能实现多轴滚动动画，核心区别在于驱动源不同。

<div class="container">
  <div class="item">
    <div class="animated-element"></div>
  </div>
  </div>

.container {
  width: 300px;
  height: 300px;
  overflow: auto;
}

.item {
  width: 500px;
  height: 500px; /* 比容器大，才能滚动 */
  background-color: lightblue;
  position: relative;
}

.animated-element {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;

  view-timeline-name: itemViewTimeline; /* 给视图时间线起个名字 */
  view-timeline-axis: both; /* 指定基于垂直和水平滚动轴 */
  animation: moveElement auto linear forwards;
  animation-timeline: itemViewTimeline;
  animation-range: entry 0% cover 100%;
}

@keyframes moveElement {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(450px, 450px);
  }
}

在这个例子中，动画元素会基于.item元素的可视区域进行动画。

七、 兼容性问题

虽然scroll-timeline-axis和scroll-timeline-name这两个属性非常强大，但遗憾的是，它们的兼容性还不是很好。 截止到今天（2024年10月26日），只有Chrome和Edge等基于Chromium内核的浏览器提供了完整的支持。 Firefox和Safari等浏览器还在积极开发中。

兼容性表格

浏览器	支持情况
Chrome	完全支持
Edge	完全支持
Firefox	部分支持
Safari	实验性支持

解决办法：

• 渐进增强： 先用传统的CSS动画或者JavaScript实现基本的功能，然后在使用支持的浏览器上启用scroll-timeline-axis和scroll-timeline-name，让用户体验更上一层楼。
• polyfill： 寻找或者自己编写polyfill，让不支持的浏览器也能模拟出类似的效果。

八、 注意事项和最佳实践

• 性能优化： 滚动驱动动画可能会消耗大量的CPU资源，特别是在移动设备上。因此，要尽量避免过于复杂的动画效果，并使用will-change属性来提示浏览器优化性能。
• 用户体验： 滚动驱动动画应该自然流畅，不要让用户感到卡顿或者不适。
• 合理使用： 不要滥用滚动驱动动画，只在必要的时候使用，避免过度设计。

九、 总结

scroll-timeline-axis和scroll-timeline-name是CSS Scroll-driven Animations的重要组成部分，它们让我们可以轻松实现多轴联动动画，为网页增添更多活力和趣味。 虽然目前兼容性还不是很好，但随着浏览器的不断发展，相信它们会越来越普及，成为前端开发者的必备技能。

好了，今天的讲座就到这里。希望各位观众老爷能够有所收获，并在实际项目中灵活运用scroll-timeline-axis和scroll-timeline-name，创造出更多令人惊艳的滚动驱动动画！ 感谢大家的收听！如果有什么问题，欢迎在评论区留言，我会尽力解答。下次再见！