本节目标：了解主流动画库的定位，学会根据需求选择合适的动画方案，掌握与 AI 配合的提示词技巧。
一个恰到好处的动画，能让页面从"能用"变成"好用"。但过度动画会让用户头晕。老师傅说："好动画应该是用户几乎察觉不到的——它只是让交互更流畅，而不是抢戏。"
Official Motion Examples | React, JS & Vue Animations
Motion（包名 motion，前身是 framer-motion）是 React 生态最流行的动画库，GitHub 30,000+ Star。你只需要描述"动画结束时元素长什么样"，Motion 自己算出中间过程——和 React"描述结果而非步骤"的写法一致。
常用动画场景和提示词：
| 你想要的效果 | 告诉 AI |
|---|---|
| 元素淡入 | "用 Motion 给这个卡片加淡入动画" |
| 列表逐个出现 | "用 Motion 的 staggerChildren 让列表项依次淡入" |
| 拖拽排序 | "用 Motion 的 Reorder 组件实现拖拽排序" |
| 页面切换动画 | "用 Motion 的 AnimatePresence 做页面过渡" |
| 滚动触发动画 | "用 Motion 的 whileInView 在元素进入视口时触发动画" |
GSAP（GreenSock Animation Platform）是 Web 动画领域的老牌王者，性能极强，能做出最复杂的动画效果。
特点：
适合场景：
提示词示例：
"用 GSAP 的 ScrollTrigger 做一个滚动视差效果（就是你在 Apple 官网常看到的那种，背景和前景滚动速度不一样），背景图片比内容滚动慢"
"用 GSAP Timeline 做一个开场动画：先 Logo 淡入，然后标题从左滑入，最后按钮弹出"
 |
 |
Three.js – JavaScript 3D Library
如果你想在网页上做 3D 效果，Three.js 是唯一的选择。配合 React 封装库 @react-three/fiber，可以用 React 组件的方式写 3D 场景。
适合场景：
不是所有动画都需要引入大型库。有些简单效果用 CSS 就够了：
| 效果 | 方案 | 是否需要库 |
|---|---|---|
| 按钮悬停变色 | CSS transition |
不需要 |
| 元素淡入淡出 | CSS @keyframes |
不需要 |
| 简单的滑入滑出 | Tailwind CSS animate-* |
不需要 |
| 列表项交错动画 | Motion | 需要 |
| 复杂滚动动画 | GSAP ScrollTrigger | 需要 |
| 3D 效果 | Three.js | 需要 |
提示词示例：
"给这个按钮加一个悬停效果，用纯 CSS transition，不要引入额外的库"
"这个加载动画用 Tailwind 的 animate-spin 就行，不需要 Motion"
少即是多。
知道了怎么让页面动起来，但动成什么样才好看？继续看 5.4 UI 风格与灵感，找找设计灵感。