使用原生 Web API 替代动画库

如果你的项目引入了 GSAP、Framer Motion 或 Anime.js 仅仅是为了处理页面过渡、滚动效果或元素入场动画,那么你正在承载浏览器不再要求你承载的包体积负担。现代 Web 动画 API 已经成熟到这样的程度:对于大多数日常 UI 工作来说,替换 JavaScript 动画库已经成为一个现实的选择。

下面我们来实际看看平台现在为你提供了什么。

Web Animations API:无需库的编程控制

Web Animations API(WAAPI)让你可以使用 Element.animate() 直接在 JavaScript 中动画化 DOM 元素。它为你提供了开发者通常需要库才能获得的动态控制能力——暂停、播放、反转、跳转——同时受益于 CSS 动画使用的同一浏览器动画引擎。

const card = document.querySelector('.card')
const animation = card.animate(
  [
    { transform: 'translateY(20px)', opacity: 0 },
    { transform: 'translateY(0)',    opacity: 1 }
  ],
  { duration: 400, easing: 'ease-out', fill: 'forwards' }
)

// Chain animations using the finished promise
animation.finished.then(() => console.log('Entrance complete'))

你可以通过 delay 实现交错动画,通过 .finished 实现顺序链接,通过 .playbackRate 实现播放控制——所有这些都无需任何依赖。

可替代的库: Anime.js、Velocity.js 以及 GSAP 的基本用例。 浏览器支持: 所有现代浏览器都支持。在 caniuse.com 上查看当前的支持情况。

无障碍性说明: 在运行动画之前,始终检查 prefers-reduced-motion。当用户偏好减少动画时,传递 duration: 0 而不是完全跳过动画调用,这样来自 fill: 'forwards' 的布局副作用仍然会生效。

const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
element.animate(keyframes, { duration: reduced ? 0 : 400, fill: 'forwards' })

CSS 滚动驱动动画:无需 JavaScript 的滚动效果

CSS 滚动驱动动画替代了最常见的 Intersection Observer + 动画库模式:在用户滚动时显示元素。

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

.reveal {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

无需 JavaScript。无需库。浏览器直接将动画的进度与元素在滚动容器中的位置关联起来。

浏览器支持: 从 Chrome 115 开始在 Chromium 浏览器中发布,并继续在各引擎中演进。在 caniuse.com 上查看当前的支持状态。

View Transitions API:页面和状态过渡

View Transitions API 处理两个 UI 状态之间的动画切换——这种模式以前需要 Framer Motion 的 AnimatePresence 或自定义 GSAP 时间线工作。

function navigate(updateFn) {
  if (!document.startViewTransition) {
    updateFn() // Fallback for unsupported browsers
    return
  }
  document.startViewTransition(updateFn)
}

对于多页应用,单个 CSS 规则即可激活跨文档过渡:

@view-transition {
  navigation: auto;
}

为共享元素分配 view-transition-name,浏览器会自动在页面之间对它们进行变形。

浏览器支持: 同文档过渡在现代浏览器中得到广泛支持,而跨文档过渡继续在各引擎中推出。在 caniuse.com 上查看当前状态。

可替代的库: Framer Motion 页面过渡、React Router 动画包装器、自定义 GSAP 页面切换逻辑。

何时库仍然有意义

原生 API 涵盖了广泛的日常动画需求,但库在特定场景中仍然保持明显优势:

• 基于物理的运动(弹簧动画、动量)——Framer Motion、React Spring
• 复杂的 SVG 动画——GSAP 的 MorphSVG 或 DrawSVG 插件
• 跨多个元素的高级时间线编排
• 广泛的跨浏览器抽象,当你不能依赖渐进增强时

决策不是原生 vs. 库——而是平台是否已经解决了你的特定问题。

结论

在添加动画依赖之前,检查 Web Animations API、CSS 滚动驱动动画或 View Transitions API 是否涵盖了你的用例。对于大多数入场动画、滚动效果和页面过渡,它们都能胜任。将库保留给它们真正擅长的专业工作——基于物理的弹簧、复杂的 SVG 变形以及复杂的多元素时间线。你的包体积和用户都将从这种差异中受益。

常见问题

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.