Motion | 锤子前端

《CSS 与 JavaScript 动画性能之争》

Sat, 30 May 2026 00:02:44 GMT

《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…

#Tailwind #Motion 怎么用好这两个流行的 css 库

Sat, 13 Sep 2025 08:38:42 GMT

#Tailwind #Motion 怎么用好这两个流行的 css 库

https://motion.dev/docs/react-tailwind

Motion

Animating with Tailwind CSS | Motion React

Learn how to combine Motion with the utility-first workflow of Tailwind CSS.

#React #SVG #Motion 通过 React + Framer Motion 实现了一个创新性的无限滚动动画，元素沿自定义 SVG 路径动态移动，并支持多元素分布、深度排序、悬停交互、滚动联动等高级功能，同时提供**响应式适配方案（D3.js 动态路径缩放），兼顾性能与视觉细节

Fri, 20 Jun 2025 01:57:12 GMT

#React #SVG #Motion 通过 React + Framer Motion 实现了一个创新性的无限滚动动画，元素沿自定义 SVG 路径动态移动，并支持多元素分布、深度排序、悬停交互、滚动联动等高级功能，同时提供**响应式适配方案（D3.js 动态路径缩放），兼顾性能与视觉细节。

1. 路径动画突破：传统水平跑马灯升级为任意复杂路径动画（如交叉曲线）。
2. 交互增强：悬停减速、滚动速度联动、深度动态排序（解决路径交叉遮挡）。
3. 响应式设计：D3.js 动态缩放路径坐标，适配不同屏幕尺寸。
4. 性能优化：`useAnimationFrame` 逐帧控制 + 简化路径复杂度。

https://tympanus.net/codrops/2025/06/17/building-an-infinite-marquee-along-an-svg-path-with-react-motion/

Codrops

Building an Infinite Marquee Along an SVG Path with React & Motion | Codrops

Learn how to create an infinite marquee that follows a custom SVG path using React and Motion.

#文章 #Motion 集成 radix

Sat, 08 Feb 2025 05:48:15 GMT

#文章 #Motion 集成 radix

https://motion.dev/docs/radix

motion.dev

Radix: How to Add Animations to Radix | Motion

Learn how to add smooth animations to Radix UI with Motion for React. Exit, layout, and transition examples for Tooltips, Dialogs, and more.