动画Animation
你可能会说
让这个图标一直循环动，比如轻轻上下浮动。
动画是一种用 @keyframes 定义多个阶段，并控制其播放方式的 CSS 动效加载指示、分步入场等连续变化可用 animation；简单的悬停和选中反馈通常用过渡 Transition就够了。循环和大幅移动容易干扰阅读，必须尊重 prefers-reduced-motion；结束后是否停在最后一帧也应由实际界面状态决定。
也常被叫作动效CSS 动画关键帧动画
组成结构 · Anatomy
0%100%2sease-in-outinfinite ⟳
动作的节点，中间帧由浏览器补齐
完整播一遍要多久
每一帧之间的快慢，见缓动
1 次入场，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%
animation-delay: 0msanimation-delay: 100msanimation-delay: 200ms
animation-delay 依次入场，页面有节奏地“亮”起来
一次性强调闪烁
新回复 已加入列表，并通过短暂入场动效标出变化
新
机器人助理 赞了你的文章
1 小时前
背景高亮闪一次
→
→
停在末帧，不循环
延伸阅读 · 权威出处