专题 C4：CSS 与设计
CSS 动画与过渡完整指南
动画应该强化状态变化，而不是干扰内容阅读。把过渡、关键帧和 easing 规则收敛到一套系统里，界面会更稳定。
先区分过渡和关键帧
过渡更适合 hover、focus、展开收起这类 A 到 B 的状态变化，因为它们可预测、易复用，也更容易控制时长。
关键帧更适合加载器、引导动效和强调路径，但循环动画必须克制，并且要给 reduced-motion 用户提供回退。
团队里要统一的动效规则
- 优先动画 `transform` 和 `opacity`，避免引发布局抖动。
- 只保留少量 easing token，例如进入、退出、强调三类。
- 把时长和 easing 当作设计系统令牌管理，避免组件各自乱写 cubic-bezier。
实用输入/输出示例
输入
组件：开关按钮 目标：切换时有明确但不拖沓的反馈
输出
transform 180ms cubic-bezier(.2,.8,.2,1) color 140ms ease-out