Intersection Observer 做滚动动画还没死，但 Chrome 146 这个新 API 让我决定换掉了

Intersection Observer 配 scroll 事件这套组合，写滚动动画的前端工程师应该都熟。但最近 Chrome 146 悄悄上了一个叫 scroll-triggered animations 的东西，我用完之后觉得，这个换掉 Intersection Observer 的理由，比之前任何一篇水文都站得住脚。

一句话讲清楚它是什么：这是 scroll-driven animations 的升级版，但这次把「触发时机」和「动画本身」拆开了。scroll-driven 动画是和滚动进度绑定的——滚动多少，动画就走多少，没有固定时长。而 scroll-triggered 的核心是 timeline-trigger，它让你精确控制「什么时候触发动画」「动画播完停在哪儿」。

先看最基础的用法。假设你有一个 .square，要它在进入视口时背景淡入，300ms 结束，播完停在最终状态：

@keyframes fade-bg-in {
  to { background: currentColor; }
}

.square {
  animation: fade-bg-in 300ms forwards;
  timeline-trigger: --trigger view() entry 100% exit 0%;
  animation-trigger: --trigger play-forwards;
}

timeline-trigger: --trigger view() entry 100% exit 0% 的意思是：当 .square 的下边缘完全进入视口（entry 100%）时触发，元素上边缘离开视口时（exit 0%）解除触发。--trigger 是你随便起的名字，用来关联同一个 animation-trigger。play-forwards 则是让动画从 0% 播到 100%，停在最终帧。

这里有个坑很多人会踩：用 play-forwards 但没加 play-once，元素滚出视口再滚回来时动画会重新触发，造成闪烁。解决方法是把 animation-trigger 改成 play-once，动画只跑一次，之后永久停在终点：

.square {
  animation-trigger: --trigger play-once;
  animation: fade-bg-in 300ms forwards;
  timeline-trigger: --trigger view() entry 100% exit 0%;
}

另一种场景：动画离开时也要反向播回去，不要闪烁。用 play-forwards play-backwards 双向模式，元素离开时自动反向播放，流畅回到初始状态：

.square {
  animation-trigger: --trigger play-forwards play-backwards;
  animation: fade-bg-in 300ms forwards;
  timeline-trigger: --trigger view() entry 100% exit 0%;
}

forwards fill mode 在这里的作用是，无论动画是正播还是反播，元素都会停在最终状态。所以即使方向变了，最终样式不会乱。

Chrome 146 目前支持的 action 关键词有：none、play-forwards、play-backwards、play-once、play、pause、reset、replay。组合 fill mode 能实现的组合比想象中多。

为什么说比 Intersection Observer 更好？核心是「JS 做的事现在 CSS 全能做了」。Intersection Observer 要写一个 Observer 实例、监听滚动、手动操作 class，逻辑散在 JS 和 CSS 两处。scroll-triggered animations 把触发条件和动画本身解耦，同一个动画可以搭配不同的触发器复用，更适合设计系统。

性能层面，浏览器可以直接优化这类 CSS 动画，不需要 JS 参与滚动事件的监听和计算。

下一步建议：Chrome 146 现在是第一个支持的浏览器（桌面版），移动端 Safari 和 Firefox 还没上。实际项目里可以先拿这个做「优雅降级」的增强——不支持的浏览器用 Intersection Observer 做兜底，支持的浏览器用 timeline-trigger 获得更丝滑的体验。

先把一个简单的 fade-in 跑通，再逐步迁移更复杂的滚动交互。