CSS 动画时间线 scroll()

CSS scroll-timeline/@scroll-timeline：声明式滚动驱动动画、animation-timeline绑定、与JavaScript Intersection Observer对比、性能优势（compositor线程运行） · 难度：入门 · +10XP

CSS animation-timeline —— 让动画跟随滚动而非时间

传统CSS动画按时间轴播放——0秒开始、2秒结束。animation-timeline让动画可以跟随页面滚动位置播放，创造出滚动驱动的视觉效果。

绑定到滚动

.reading-progress {
  animation: grow 1s linear;             /* 动画定义 */
  animation-timeline: scroll(root);      /* 跟随页面根元素滚动！ */
  transform-origin: left;
}
@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

当页面从顶部滚到底部，进度条从0%变化到100%。

绑定到元素进入视图

.reveal {
  animation: fadeIn 0.5s ease;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

元素从刚好进入视口(entry 0%)到完全进入(entry 100%)，动画从0播放到100%。

动手练习

1. 基础练习：做一个页面顶部固定阅读进度条，宽度跟随页面滚动从0%到100%。
2. 进阶应用：用view()时间线做一组"卡片渐显"——卡片进入视口时淡入+上移。
3. 项目实战：在文章页面实现"阅读进度环"——圆形SVG stroke-dashoffset跟随滚动。