《CSS 与 JavaScript 动画性能之争》

标签：#前端 #CSS动画 #JavaScript动画 #WebAnimationsAPI #性能优化 #GSAP #Motion

总结：
本文通过交互式演示拆解了 CSS 与 JS 动画的性能差异真相：CSS Keyframes 和 Transitions 运行在独立线程，主线程阻塞时依然流畅；而传统 JS 动画（如 requestAnimationFrame 循环）与主线程争抢资源，容易卡顿。但 Motion 库通过底层调用 Web Animations API（WAAPI）绕过了这一限制，实现了与 CSS 同级别的流畅度。作者建议优先使用原生 CSS，遇到 CSS 无法覆盖的场景时选择 Motion 等 WAAPI 方案，而非直接上 GSAP 这类纯主线程库。

文章要点：
1. CSS 动画的核心优势不是"计算快"，而是运行在独立线程，主线程再忙也不影响动画流畅度
2. 传统 JS 动画（requestAnimationFrame）每帧都在主线程计算，React 重渲染或 fetch 解析时容易掉帧
3. Motion 库（原 Framer Motion）底层使用 Web Animations API，能接入与 CSS 相同的底层动画引擎，主线程阻塞时照样丝滑
4. GSAP 功能极其强大，但坚持在主线程运行，是"能力换性能"的取舍，适合复杂序列动画而非简单过渡
5. 现代 CSS 已经很能打，View Transitions、linear()、Animation Timeline 等新 API 大幅减少了必须上 JS 的场景
6. 选型建议：能用 CSS 就不用库 → CSS 搞不定优先选 Motion/WAAPI → 只有复杂时间线控制才考虑 GSAP

URL：https://www.joshwcomeau.com/animation/css-vs-javascript/

Joshwcomeau

CSS vs. JavaScript • Josh W. Comeau

There are a bunch of JavaScript animation libraries out there, and you might have wondered whether there’s a performance cost compared to traditional CSS transitions and keyframe animations. In this blog post, we’ll compare the same animation across several…

#CSS CSS 新增 linear() 时间函数，用“连点成线”方式原生实现弹簧、弹跳动画，免 JS，但需工具生成数据且要注意中断与回退。

https://www.joshwcomeau.com/animation/linear-timing-function/

Joshwcomeau

Springs and Bounces in Native CSS • Josh W. Comeau

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll…

#CSS #文章 Josh W. Comeau 在《Color Shifting in CSS》中揭示了 CSS 颜色过渡变灰的本质：浏览器用 RGB 插值，即使写的是 HSL；他用 filter: hue-rotate() 绕过限制，实现鲜艳无缝的色调旋转，并叠加闪烁动画，让粒子效果生动又轻盈。

https://www.joshwcomeau.com/animation/color-shifting/

Joshwcomeau

Color Shifting in CSS • Josh W. Comeau

A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into…

#CSS 动画切换导航菜单的js和css实现

https://www.smashingmagazine.com/2025/06/creating-moving-highlight-navigation-bar-javascript-css/

Smashing Magazine

Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing Magazine

In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the `getBoundingClientRect` method to explicitly animate the border between…

#CSS CSS 动画中部分关键帧（Partial Keyframes）的使用技巧和优势。

https://www.joshwcomeau.com/animation/partial-keyframes/

Joshwcomeau

Partial Keyframes • Josh W. Comeau

CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our keyframe animations so much more reusable and dynamic! 🤯

#CSS #文章 这篇文章通过介绍起源感知动画、合适的缓动函数、自定义缓动曲线、基于弹簧的交互以及选择合适的CSS属性等实用技巧，帮助UI开发者将动画从“好”提升到“优秀”，从而显著增强用户体验。

https://emilkowal.ski/ui/good-vs-great-animations

Emil Kowalski

Good vs Great Animations

Practical tips on how to go from good to great animations.

#React #CSS 动画集合组件

https://www.reactbits.dev/

React Bits

An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.