CSS 滚动驱动动画入门

利用 scroll() 和 view() 时间线，让动画跟随滚动进度自动播放，无需 JavaScript。 · 难度：入门 · +15XP

滚动驱动动画：CSS 的新能力

CSS 滚动驱动动画（Scroll-driven Animations）允许你将动画进度绑定到滚动容器的滚动位置或元素的可见性上。通过 scroll-timeline 和 view-timeline，你可以创建视差、进度条、淡入等效果，完全脱离 JavaScript 监听。

核心概念

• 滚动时间线（Scroll Timeline）：动画进度由滚动容器的滚动偏移量决定。
• 视图时间线（View Timeline）：动画进度由元素在视口中的可见比例决定。
• animation-timeline：将动画与时间线关联的关键属性。

1. 使用 scroll() 创建进度条

以下示例展示一个页面阅读进度条：

@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: #e74c3c;
  transform-origin: left;
  animation: grow linear;
  animation-timeline: scroll(root);
}

scroll(root) 表示使用根滚动容器（即页面本身）作为时间线。

2. 使用 view() 实现淡入效果

当元素进入视口时开始动画：

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  animation: fadeIn linear both;
  animation-timeline: view(block);
  animation-range: entry 0% entry 100%;
}

view(block) 跟踪元素在块方向上的可见性。animation-range 控制动画的起止点。

3. 时间线范围与关键帧

你可以精细控制动画触发的位置：

4. 浏览器兼容性

此功能目前（2025年）在 Chrome/Edge 115+ 中支持，Firefox 和 Safari 处于开发阶段。使用时建议添加 @supports 回退。

@supports (animation-timeline: scroll()) {
  /* 滚动驱动动画 */
}

滚动右侧预览区域，观察进度条与方块淡入效果。