CSS Scroll-Driven Animations 滚动驱动动画

CSS滚动驱动动画：animation-timeline:scroll()基于滚动位置、view-timeline元素进入视图触发、scroll-driven动画性能、使用场景（视差/进度条） · 难度：入门 · +10XP

CSS 滚动驱动动画 —— 滚动到哪里，动画就播到哪里

见过那种"随着页面往下滚，进度条从0%走到100%"的效果吗？这就是滚动驱动动画（Scroll-Driven Animations）。以前必须用JS监听scroll事件，现在纯CSS就能实现。

基础：滚动进度条

/* 定义动画 */
@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* 绑定到页面滚动 */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: #4CAF50;
  animation: grow linear;
  animation-timeline: scroll(root);  /* 关键！绑定到页面根元素滚动 */
  transform-origin: left;
}

两种时间线类型

view() —— 元素进入视图时触发动画

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-reveal {
  animation: fadeUp 1s ease;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
  /* entry=元素进入, exit=离开, cover=全覆盖 */
}

动手练习

1. 基础练习：做一个固定在页面顶部的阅读进度条——宽度从0%跟随页面滚动到100%，颜色从蓝色渐变到绿色。
2. 进阶应用：用view()做一组"卡片渐显"效果——5张卡片从页面底部滚入视口时依次渐显+上移，配合不同的延迟制造节奏感。
3. 项目实战：做一个"滚动故事"页面——3个章节，每章滚动到中间位置时触发不同的动画（第一段淡入、第二段从右滑入、第三段放大出现）。

接下来学什么？

下一课学习 Subgrid 子网格——让嵌套网格的子元素完美对齐到父网格的轨道线上。