animation
定义CSS 动画属性，配合 @keyframes 定义无需交互触发即可自动播放的关键帧动画
animation 与 transition 的根本区别：transition 需要状态变化触发且只有起止两点；animation 由 @keyframes 定义多帧，可自动播放、循环、反向。常用子属性：name、duration、timing-function、delay、iteration-count、direction、fill-mode。
循环骨架屏、加载指示器、呼吸效果这类「一直在动」的需求，都是 animation 的主场。配合 prefers-reduced-motion 媒体查询，还能尊重系统减少动画的偏好。
- iteration-count: infinite 无限循环，steps() 做逐帧精灵动画；
- fill-mode: forwards 让动画停在终点，避免状态回跳；
- 多个动画用逗号分隔，错开 delay 可做波浪效果。
CSS
@keyframes spin { to { transform: rotate(360deg); } } .loader { animation: spin 1s linear infinite; } @media (prefers-reduced-motion: reduce) { .loader { animation: none; } }
⚠ 常见误区
- 动画属性尽量只用 transform / opacity，否则掉帧
- infinite 动画记得给 reduced-motion 兜底
- animation-fill-mode 忘写 backwards 时，delay 期间元素会闪现在初始位