AI 摘要：Chrome 浏览器将在明年初推出纯 CSS 实现的滚动触发动画。这是一种基于时间，并在特定滚动偏移量（scroll offset）触发的动画，与现有的滚动驱动动画不同。这项功能有望在 Chrome 145 版本正式发布，它将替代部分 IntersectionObserver 的用途。

1. 新特性发布预告
• Chrome 浏览器即将支持纯 CSS 实现的滚动触发动画（Scroll-Triggered Animations）。
• 预计在明年初推出，并在 Chrome 145 版本正式发布。

2. 滚动相关动画的区别
• 滚动驱动动画（Scroll-Driven Animations）：动画进度随滚动条移动从 0% 到 100%，停止滚动则暂停，反向滚动则倒退。
• 滚动触发动画（Scroll-Triggered Animations）：在达到特定的滚动偏移量时触发，是基于时间的动画。

3. 替代传统实现方式
• 新特性将允许开发者以声明式（declaratively）的 CSS 方式实现，替代部分对 IntersectionObserver 的依赖。

4. 资源与演示
• 为 timeline-trigger 的范围（ranges）创建了一个可视化工具，解释激活范围（activation range）和活动范围（active range）的概念。
• 激活范围（activation range）是触发器被激活的区域，活动范围（active range）是触发器保持激活状态的区域，活动范围必须包含激活范围。

5. 体验方式
• 用户可以在 Chrome Canary 中启用“Experimental Web Platform Features”旗标来提前体验该功能。

Bram.us

CSS Scroll-Triggered Animations are coming to Chrome!

We have Scroll-Driven Animations. Now say hi to Scroll-Triggered Animations.