Framer Motion 正式独立升级为 Motion，从 React 专属动画库进化为支持 React、Vue、JavaScript 和 Web Animations API 的全平台动画引擎。官方将其定位为"生产级 Web 动画方案"（Production-grade animation for the web）。
Motion 的核心能力
1. 一行代码实现动画
核心 API 是 animate()，使用极其简单：
import { animate } from "motion"
animate(".box", {
scale: 1.2
})2. 独立 Transform 属性
每个 transform 属性独立控制，不会互相覆盖：
animate(".box", {
x: 100,
rotate: 45,
scale: 1.2
})无需套娃、无需 wrapper、无需矩阵计算。
3. 原生滚动动画
基于浏览器 ScrollTimeline 实现硬件加速，支持滚动视差、滚动联动、滚动进度条等。无需引入额外插件。
4. 物理弹簧动画
内置 type: "spring" 真实弹簧物理模型，效果接近 iOS、macOS、Figma、Linear 等顶级产品的交互体验。
5. 优雅的退出动画
允许组件离开 DOM 前先完成动画，支持弹窗关闭、列表删除、页面切换、Toast 消失等场景的丝滑过渡。
Layout Animation：布局间自动过渡
Motion 的标志性能力——在任意布局之间自动过渡。卡片展开、图片切换、共享元素转场、拖拽排序、瀑布流重排等效果，只需一个 layout 属性。
混合引擎（Hybrid Engine）
同时利用 JavaScript 与浏览器硬件加速能力。当浏览器原生能力足够时走硬件加速，能力不足时自动回退到 JavaScript 引擎。充分利用 Web Animations API 与 ScrollTimeline。
React 开发者无缝迁移
经典 API 全部保留：motion.div、AnimatePresence、variants、layout、drag、whileHover。Framer Motion 用户迁移成本极低。
400+ 动画案例直接复制
官方提供 400+ Copy & Paste 示例，包括打字机效果、无限滚动、轮播、FAB 浮动按钮、磁吸光标、视差、骨架屏、iOS 风格交互等。很多效果以前可能需要研究两三天，现在复制粘贴即可。
生态与影响力
Motion 每月 npm 下载量超过 3000 万次，被 Framer、Figma 等头部产品使用。Web 动画的发展经历了 jQuery Animate → CSS Animation → GSAP → Framer Motion，现在 Motion 正试图统一这一切，成为下一代动画基础设施。
官网：motion.dev
