Animation 关键帧动画

关键帧动画用 @keyframes 定义时间线上多个状态，再由 animation-* 属性控制播放、次数、方向和结束后的样式。它适合加载指示、强调和独立的时间序列，不适合把用户可控状态藏在无限循环里。

@keyframes pulse {
  from { opacity: .55; }
  to { opacity: 1; }
}
.loading { animation: pulse 900ms ease-in-out infinite alternate; }

animation-fill-mode 决定动画开始前和结束后是否保留关键帧样式，animation-iteration-count 可以是有限次数或 infinite。多个动画同时作用时，声明顺序和属性覆盖仍受层叠规则影响。动画结束后没有语义状态更新，视觉也不能成为唯一反馈。

实验与练习

创建一个三帧进度提示，分别设置一次播放、三次播放和无限播放。监听 animationend 只作为观察信号，不能用它替代真正的加载完成状态。中途切换类名，记录取消和重新开始的条件。

可运行微实验：区分状态、时间线与合成

为同一元素分别添加 transition、keyframes 和 transform。记录触发条件、持续时间、动画是否可逆、是否影响布局；打开 Performance 面板观察只改 transform 与同时改 width/top 的差异，并在 prefers-reduced-motion: reduce 下验证降级。

常见错误

• 用无限动画表达永远等待，却没有错误和完成状态。
• 只改 keyframes，不检查 fill-mode 和初始状态。
• 把 animationend 当成业务操作一定完成的证明。

继续阅读

关键帧改变视觉属性，下一篇单独解释空间变换：Transform 变换。

练习

1. 用最小输入复现“Animation 关键帧动画”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案