让讲解动起来：CSS 动画与 GSAP
步骤演示自己会动：能用 CSS 就用 CSS，复杂编排交给 GSAP。
学习证据 学完后，怎么核对？
把学习结果留在一个可以回看、可以复做的动作里；这一区只写学生能自己检查的证据。
如何核对
- 可离线运行的网页产物
- 功能与无障碍验收
适用边界
用于静态网页与基础交互；生产网站还需安全、性能、兼容性和部署流程。
最后复核
这是内容复核日期，不是学习截止日期。
讲
例子「炫是炫，你的对照组呢？」
小舟给项目页开场做了旋转飞入，全班惊呼好炫。老师看完只问一句：「你推理里最关键的『对照组』那一步，怎么 0.3 秒就飞过去了？」满屏特效里，论证的命门被盖住了。动画会讲话，也会打掩护——这一课先发武器，再教你别被武器反噬。
名词两级武器：CSS 动画＝写在样式层的动效，transition 管两个状态间的过渡、@keyframes 管关键帧；GSAP＝专业动画库，写一条时间线（timeline）编排多个元素谁先谁后出场。
定义一条决策线：能用 CSS 就用 CSS，编排才上 GSAP
决策线不是鄙视链，是省力气：依赖越少，页面越皮实。
左支几行就够——你手里这张复习卡的翻面、按钮按下去的手感，全是 CSS 动画，这页没为动效背任何库：
.card{transition: transform .25s ease}
.card:hover{transform: translateY(-4px)} /* 悬停轻轻浮起 */
右支是编排——「三步讲解依次出场」这种有剧本的活，GSAP 的时间线写起来像导演的分镜表：
<script src="assets/vendor/gsap.min.js"></script>
<script>
gsap.timeline()
.from('.step1', {opacity: 0, y: 24}) // 第一步先出
.from('.step2', {opacity: 0, y: 24}) // 第二步接上
.from('.step3', {opacity: 0, y: 24}); // 第三步收尾
</script>
| 武器 | 主场 | 代价与身份 |
|---|---|---|
| CSS 动画 | 单元素、两状态：悬停、翻面、淡入 | 几行代码，零依赖 |
| GSAP 时间线 | 多元素按剧本依次出场的编排 | vendored 单文件（本站就在 assets/vendor/）；免费使用但非开源许可，现属 Webflow——用之前如实知道这两点 |
两条附则：库一律 vendored 单文件进项目、不用联网 CDN，断网后通过项目 HTTP 预览，页面照样能动；有同学看动画会晕——用 CSS 的 prefers-reduced-motion 查询尊重系统「减弱动态效果」设置，让页面在需要时安静下来。
泛化换个角度：出场顺序，就是论证顺序
把「AI 说 X / 但其实 Y / 因为 Z」做成三步出场：X 先来，读者以为对；Y 推翻它，落差才成立；Z 补上根因，水到渠成。要是让 Z 先出场，读者没经历「以为对」的那一步，翻转就没了力气——排错顺序，等于把话说反。这功夫远不止动画：老师板书先写哪行、电影先给哪个镜头、法庭先传哪位证人——一切「讲给人听」的活都在排时间线，动画只是把它写成了代码。所以每加一个动效，先自问：它在帮读者跟上推理，还是在替哪一步打掩护？
例
补充三例——两个常见用法，一个易错。
小雨给作品卡加动效：悬停浮起 2 行、点击翻面 4 行，纯 CSS，零依赖。她本来想上 GSAP，对着决策线问了一句「几个元素？两个状态？」——左支，收工。武器越轻，页面越皮实：这六行在断网的老电脑上照样丝滑。
阿凯用 GSAP 时间线做「光合作用」讲解：第一步「叶片晒太阳」（现象）→ 第二步「锡箔遮光的那半片叶子」（对照）→ 第三步「碘液检验，遮光处不变蓝」（结论）。顺序完全照论证排——先现象、再对照、后结论，观众被推理牵着走。这段演示他存着：以后「把项目讲成课」直接就是素材。
大鹏给页面每个元素都上了旋转飞入，连页脚都在弹跳。放给同学看，对方全程「哇」，看完却答不出他的结论是什么——关键转折被十一个无关动效淹没了。错在哪：动效是注意力的指挥棒，处处挥舞等于没有指挥。修法：动效配额制——一页只给「最该被注意的一两步」；每个动效过一遍那句自问：帮读者跟上推理，还是打掩护？答不上来的，删。
做
「鼠标移上去，卡片轻轻浮起来」——按本课决策线，该用哪级武器？
- 左支：给你的作品卡加纯 CSS 动效（悬停浮起或点击翻面），不许引任何库。
- 右支：把你项目的三步流程用 GSAP 做成依次出场——库 vendored 单文件进项目（不用联网 CDN），接线可以交给智能体，任务单约束写明「顺序按我给的论证排」，并让它顺手加上 prefers-reduced-motion 的安静模式。
- 写一句话说明：三步为什么是这个顺序（谁先谁后，论证才成立）。
- 放给一个同学看，问他「顺序讲得通吗、有没有哪步被特效盖住了」；git 拍快照。
怎么算过关：CSS 动效零依赖生效；三步按论证顺序出场且说得出理由；断网后用项目 HTTP 预览，页面动效照常；同学能复述出你的结论——而不是只记得炫。
卡
动效决策线怎么走？加动效前必问的那句话是什么？
单元素两状态→CSS（transition/@keyframes，零依赖）；多元素按剧本出场→GSAP 时间线（vendored 单文件）。必问：这个动效在帮读者跟上推理，还是在替哪一步打掩护？
- 能用 CSS 就用 CSS：依赖越少，页面越皮实；编排才请 GSAP。
- 出场顺序＝论证顺序：先现象、再对照、后结论——排反等于说反。
- 动效配额制：只给最该被注意的一两步；答不出「为什么动」的动效，删。