用 CSS scroll-driven animation 做滚动揭示

滚动揭示（scroll reveal）几乎是现代网站的标配。过去我们依赖 IntersectionObserver 甚至整个 GSAP ScrollTrigger，但如今 CSS 已经能原生胜任大部分场景。

animation-timeline 的魔法

核心只有两行：

.reveal {
  animation: ink-rise linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 28%;
}

view() 把动画进度绑定到元素进入视口的过程，animation-range 控制起止区间。整个过程零 JavaScript，主线程毫无压力。

优雅降级

对尚不支持的浏览器，用 @supports 兜底：

@supports not (animation-timeline: view()) {
  .reveal { opacity: 0; transform: translateY(28px); }
  .reveal.is-visible { opacity: 1; transform: none; }
}

再配一个轻量的 IntersectionObserver 加 .is-visible 即可。两条路径，体验一致。

别忘了 reduced-motion

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

动效是锦上添花，不该成为某些用户的障碍。