CSS 滚动驱动动画 timeline-scope

• timeline-scope
  • 语法
  • 兼容性

timeline-scope

看到 scope 就知道这个属性是和范围有关, 没错, timeline-scope 就是用来修改一个具名时间线(named animation timeline)的范围.

我们介绍过的两种时间线 scroll progress timeline 和 view progress timeline, 使用这两种时间线(通过 view(), scroll(), 或者具名时间线)的元素都需要向上查询 DOM 树找到滚动容器, 这就是时间线的默认范围.

可是有时驱动元素 A 动画可能是 A 的兄弟元素 B 的滚动, 我们应该怎么办呢?

• 在 A 上使用 animation-timeline 表示需要一个具名时间线来驱动动画, 比如 --whatever-this
• 在 B 元素上使用 scroll-timeline-name: --whatever-this 表示由 B 元素来提供时间线.
• 最后, 在 A 和 B 的共同祖先 P 上使用 timeline-scope: --whatever-this 表示时间线范围提升到 P 和 P 的任何后代元素上.

来看例子

📖 我特意没有在两个 div 之间换行, 为了避免换行的出现

<div class="p">
  <div class="a"></div>