CSS scroll-timeline 新属性

CSS scroll-timeline新属性：scroll-timeline-name/scroll-timeline-axis、与animation-timeline绑定、比旧语法更简洁、纯CSS实现滚动驱动动画、Chrome 115+支持 · 难度：入门 · +10XP

CSS scroll-timeline —— 声明式滚动时间线

scroll-timeline是Scroll-Driven Animations的声明式API。你可以给滚动容器命名一个时间线，然后让任何元素的动画绑定到这个时间线上。

定义和绑定

/* 步骤1：在滚动容器上定义时间线 */
.scroll-container {
  overflow-y: scroll;
  scroll-timeline-name: --progress;
  scroll-timeline-axis: block;  /* 垂直滚动驱动 */
}
/* 步骤2：让动画元素绑定到这个时间线 */
.progress-bar {
  animation: grow 1s linear;
  animation-timeline: --progress;  /* 绑定到自定义时间线 */
  transform-origin: left;
}

动手练习

1. 基础练习：用scroll-timeline做一个跟随滚动进度的指示器。
2. 进阶应用：在不同滚动区域创建不同的时间线，每个区域独立驱动自己的动画。
3. 项目实战：在文章页面做"圆形阅读进度环"——圆环描边从0到100%跟随阅读进度。