CSS 滚动驱动动画 scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )

• scroll-timelinescroll-timeline-name❤️scroll-timeline-axis
  • 解决问题
  • 语法
    • animation-timeline-name
    • animation-timeline-axis

scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )

在 scroll() 的最后我们遇到了因为定位问题导致滚动效果失效的情况, 当然 CSS 允许我们手动指定滚动容器, 也就是哪个容器来提供 scroll progress timeline. 我们需要在提供时间线的滚动容器上声明 scroll-timeline 属性.

再次重温 scroll progress timeline, 这个时间线(timeline)是通过滚动容器(scroller)上下或左右方向的滚动推进的. 开始滚动的位置表示时间线处在