标签：view()

A First Look at Scroll-Triggered Animations

Chrome 146率先实现了滚动触发动画功能，这是一种不同于滚动驱动动画的新CSS特性。滚动触发动画在元素滚动至特定阈值后，以固定时长播放动画，类似于CSS版的Intersection Observer。文章对比了两者，并详细阐述了`timeline-trigger`与`animation-timeline`的区别，核心在于前者用于触发，后者用于驱动。通过`@keyframes`定义动画，并使用`timeline-trigger: view()`配合`entry`和`exit`范围值，可以精确控制动画的触发和退出条件。文章深入讲解了``关键字（如`play-forwards`、`play-once`、`play-backwards`）与`animation-fill-mode`的组合使用，以实现一次性触发动画、双向播放或保留最终状态等不同效果。文中通过多个代码示例演示了如何将动画触发逻辑与动画定义解耦，利用CSS自定义属性和`animation-trigger`来实现多个元素的错开动画效果，甚至是一个元素触发其他元素动画的进阶用法。文章属于技术教程，全面展示了这一新特性的核心语法、控制机制及实际应用场景。