动画Animation
视觉效果与操作状态用多个阶段编排一段完整动作
动画通过关键帧控制加载、入场和连续状态等多阶段变化。简单的悬停和选中反馈通常用过渡 Transition就够了；循环或大幅运动要克制，并尊重减少动态效果设置。
0%50%100%@keyframes 定义节点，浏览器补齐中间
什么时候用
- 加载类循环：进度条 Progress、骨架屏 Skeleton 的呼吸与转动加载中，请稍候…
- 关键帧编排：把一段完整动作拆成节点，浏览器补齐中间0%50%100%把动作拆成关键帧，浏览器补齐中间
- 入场编排：多个元素用 delay 依次出场，有节奏感123
- 状态切换用过渡 Transition，自主播放的多阶段动作再用动画悬停变色transition加载呼吸animation状态切换 vs 自主播放，各司其职
什么时候不用
- 循环动画滥用：满屏都在动，晃眼又廉价
- 简单悬停效果不必使用关键帧，过渡就能完成悬停变色@keyframes一个 hover 也写关键帧，大材小用
- 忘了 fill-mode: forwards：播完跳回第一帧，前功尽弃↩忘了 fill-mode: forwards，播完跳回第一帧
- 响应 prefers-reduced-motion，减少用户不需要的动画减弱动态效果用户开了减弱，动画照播不误
组成结构 · Anatomy
0%100%2sease-in-outinfinite ⟳
1关键帧Keyframes动作的节点，中间帧由浏览器补齐
2时长Duration完整播一遍要多久
3速度曲线Timing每一帧之间的快慢，见缓动
4播放次数Iteration1 次入场，infinite 循环
常见变体 · Variants
一次性Once
入场编排，播完停在末帧
无限循环Infinite
⟳
加载、呼吸等持续状态
交替往返Alternate
↔
摆动闪烁这类往复动作
典型使用场景
骨架屏呼吸循环
@keyframes 呼吸：透明度 0.4 ↔ 1 循环，告诉用户“正在加载”
加载指示器旋转
AI 助手
正在生成回复，大约需要 5 秒…
animation: rotate 0.8s infinite，一直转到数据回来
页面入场编排
访问量
12,480
▲ 8.2%
新用户
326
▲ 3.1%
转化率
4.6%
▼ 0.4%
delay 0msdelay 100msdelay 200ms
animation-delay 依次入场，页面有节奏地“亮”起来
一次性强调闪烁
小狐狸 回复了你：这个动效太顺滑了！
新
机器人助理 赞了你的文章
1 小时前
背景高亮闪一次
→
→
停在末帧，不循环