编排与节奏 · 谁先动、谁后动
关键帧Keyframes
- 可控
- 分阶段
- 结构化
把一段动画拆成几个时间点上的状态（0%、50%、100%），中间的过程交给浏览器补出来。
什么时候用它
动画有超过两个状态、或中途要改变方向时用它；只有起点和终点时用“缓动”描述就够了。
参数
@keyframes · 0% / 50% / 100% · per-step easing, no single easing for all · animation-fill-mode: both
配方
关键帧结束后保持末态 : both关键帧 → @keyframes · 0% / 50% / 100% · per-step easing, no single easing for all · animation-fill-mode: both
给 AI 的一句话
用 @keyframes 写这段动画，包含 0%、50%、100% 三个关键帧，50% 处再向上 4px，总时长 600ms，并设 animation-fill-mode: both。