Motion

Motion 是一个开源的 Web 动画库，前身是 Framer Motion。它把界面里常见的动效封装成简短的 API：给元素加上 motion 前缀，再用 animate、whileHover、drag 这类属性描述状态，动画就自己跑起来。React、Vue 和原生 JavaScript 都能用，同一套写法换个框架不必重学。

主要功能

布局动画能处理 CSS 做不到的事，比如元素在列表和详情页之间切换时，位置和尺寸平滑过渡，靠的是 layoutId 加 AnimatePresence。手势方面，按下、悬停、拖拽都有对应属性，拖拽松手还带惯性。滚动动画把任意数值绑定到滚动进度上，浏览器支持时走 ScrollTimeline，交给硬件加速。

弹簧动画按刚度、阻尼、质量三个参数计算，目标中途改变时数值会带着速度继续追。此外还有 3D 支持，可以用同样的弹簧和时间线驱动 Three.js 的网格与材质。体积上，mini 版从 3.2kb 起步，其余功能用 LazyMotion 按需加载。

付费部分

库本身免费开源，Motion+ 是另一层订阅服务，包含可访问的 Motion UI 组件、示例与教程库、可视化时间线编辑的 Motion Studio，以及给 AI 编程助手提供文档和示例的 AI Kit。页面上还提到 Performance Doctor，通过代码分析和本地运行时审计找出慢动画并给出修改建议。

适合谁

适合需要给网页或应用加交互动效的前端开发者，尤其是已经在用 React 或 Vue 的团队。只想做简单过渡的人，几行代码就能上手；要做复杂的手势、滚动联动和跨组件布局动画，也有对应的文档和示例可查。库的界面和文档都是英文。