用途：作为 CSS 动画的实现与调试参考，涵盖 transition、@keyframes、transform、clip-path、起始样式、错峰和触屏安全的 hover/press 反馈。核心判断是：由用户交互驱动的状态变化用 transition，页面自动播放的动画用 @keyframes。
主要能力与规则：transition 写在基础状态而非仅 :hover；避免 all，明确列出属性；显式写出 ease-out；transition-delay 单独声明。keyframes 中可省略 0%/100% 以沿用元素现有值；用 animation-fill-mode: forwards 保持结束状态，backwards 避免延迟入场闪烁，both 两者兼有；infinite 用于循环，alternate 用于往返，paused 是 transition 无法做到的暂停。React 中可通过改变元素 key 重新触发动画。
transform 不改变文档流。优先用 translateX/translateY 和百分比（如 translateY(100%) 可自适应高度隐藏）；press 反馈用 :active 上的 scale(0.97)，几乎不要从 scale(0) 开始；旋转常用 ease-in-out，持续旋转用 linear；transform-origin 决定锚点，弹出层应从触发器而非自身中心动画；行内元素需先设 display: inline-block 才能变换。3D 需要父级 preserve-3d 与 perspective，子级可用 backface-visibility: hidden。
clip-path 定义裁剪区域，不改变布局。inset() 覆盖大多数动画场景：inset(0) 全部可见，inset(100%) 全部隐藏，inset(0 50% 0 0) 隐藏右半，可用于对比滑块、文字遮罩、图片揭示、标签高亮、主题切换擦除等。
触屏安全：hover 效果用 @media (hover: hover) and (pointer: fine) 包裹；当 hover 用于揭示信息时，配合 :focus-visible 兼顾键盘用户。
缓动参考：--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1)；--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94)；--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1)；--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86)；--ease-vaul: cubic-bezier(0.32, 0.72, 0, 1)。默认 hover 约 150–200ms。
使用方式：作为参考文档加载；共享动效政策见 ../animate/references/canonical-policy.md，冲突时以它为准；具体模式（hover 揭示、toast 堆叠、文字揭示、轨道、clip-path 效果）见 RECIPES.md。
限制：本资料为课程模块的参考笔记，未提供安装命令、版本或价格信息；复杂动画、需要真实弹簧物理或可中断交互时建议使用 Motion 等库；帧率与合成器提升由浏览器决定，重要性能结论需实际录制验证。