你以为 scroll-reveal 只能靠 IntersectionObserver？今天 Chrome 145 把这件事彻底变了

写滚动触发动画，前端圈子里的标配方案是 IntersectionObserver：监听元素进视口，加上 class，CSS 接收信号开始播动画。这套流程跑了快十年。

Chrome 145 说，可以不用这么写了。

animation-trigger 是什么

这是 Animation Triggers 规范里的核心属性，用来给 CSS 动画配一个”开关”。开关打开，动画播放；开关关上，动画反向——整个过程浏览器替你监听，你自己一行 JS 都不用写。

语法分两层。

第一层是触发器，定义在哪个节点上监听、触发条件是什么：

/* 定义一个叫 --fade-in 的触发器，绑到 view timeline（即视口）*/
timeline-trigger-name: --fade-in;
timeline-trigger-source: view();
timeline-trigger: --fade-in view() entry 100% exit 0%;

第二层是动画，把动画动作绑定到某个触发器上：

.card {
  animation: slide-up 0.4s ease-out both;
  animation-trigger: --fade-in play-forwards play-backwards;
}

play-forwards 是触发激活时播放，play-backwards 是退出时反向播放。也可以单独用 play-forwards，只播一次不回头。

它和 scroll-driven animations 有什么区别

已发的 scroll-driven 动画（animation-timeline: scroll() 或 view()）是连续擦除型：动画进度和滚动位置完全绑定，你滚多少它播多少，往上滚就倒回去。

animation-trigger 是二元状态型：触发器只有开/关两种状态，一旦打开，动画按自己的时长独立播放，和滚动位置再无关系。

能做什么

最典型的场景：滚动到某元素完全进入视口时播一次入场动画。

.reveal {
  animation: fade-up 0.5s ease-out both;
  animation-trigger: --t view() entry 100% exit 0% / entry 0% exit 100%;
  /* 激活范围：元素完全进入视口后（entry 100%），退出视口前（exit 0%）都保持激活 */
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/ 前面是激活范围，后面是保持活跃的范围——两个可以分开定义，这让”进视口播放、退视口不播”和”进视口播放、离开再反向”都能声明出来。

支持的 action 还有 pause、reset（回到起点并暂停）、replay（从头重播）、none（什么都不做）等。

现在的状态

Chrome 145 实验特性，Animation Triggers 规范仍是 Editor’s Draft，语法在正式 Candidate Recommendation 前还可能调整。

/* 渐进增强写法 */
@supports (animation-trigger: --t view()) {
  .reveal {
    animation-trigger: --t view() entry 100% exit 0%;
    animation: fade-up 0.4s ease-out both;
  }
}

Firefox 和 Safari 暂时没有支持时间表。如果你在用 IntersectionObserver 写 scroll reveal，现在可以开始迁移了——先在 @supports 里写新写法，老浏览器照常跑 IntersectionObserver，两条路并行不冲突。

下一步：

• 试玩 demo（Chrome 145+）：developer.chrome.com/blog/scroll-triggered-animations
• 规范进度：W3C Animation Triggers Editor’s Draft
• 迁移指南：把现有的 IntersectionObserver 监听逻辑迁移到 CSS 声明，原有 class 保留做 fallback