玄武屏内置 16 种入场动画，按效果性质分四组。每种都有 duration / delay / easing 三个调节参数。

第 1 组：淡入类（最稳妥）

类型	效果
fade-in	透明度 0 → 1，最简单的出现
fade-in-up	淡入 + 从下往上轻微位移
fade-in-down	淡入 + 从上往下
fade-in-left	淡入 + 从右往左
fade-in-right	淡入 + 从左往右

适用：正文段落、列表、辅助元素。

第 2 组：飞入类（动感）

类型	效果
fly-in-left	从左侧飞入（位移大）
fly-in-right	从右侧飞入
fly-in-top	从顶部飞入
fly-in-bottom	从底部飞入

适用：标题、重点强调元素、演示节奏需要动感时。

第 3 组：缩放类（聚焦）

类型	效果
zoom-in	从中心放大出现（scale 0 → 1）
zoom-in-left	从左侧放大
zoom-in-right	从右侧放大
wipe-left	从右往左擦除出现（mask 渐变）
wipe-right	从左往右擦除

适用：单一焦点元素、戏剧化强调、重点信息。

第 4 组：弹跳类（强调）

类型	效果
bounce-in	弹跳出现（超出后回弹 2 次）
rubber-in	橡胶变形出现（先压扁再弹起）

适用：重要数字、惊喜元素、情绪化场景。

缓动曲线（easing）

控制动画的速度变化曲线：

曲线	效果	适用
linear	匀速	旋转、循环
ease-in	慢起快收	退场
ease-out	快起慢收	入场（默认）
ease-in-out	慢起慢收	长动画
cubic-bezier(...)	自定义	高级调试
spring	弹簧物理	拟物效果

时长建议

时长	适用
100ms	微反馈（高亮、tooltip）
200–300ms	标准入场（fade / fly）
400–500ms	戏剧化入场（zoom / bounce）
800ms+	慢叙事、影片风格

默认 400ms 是经过用户测试的最佳值。除非有明确理由，不要乱改。

delay 错峰

同一 order 的多个元素同时触发，但用 delay 错开 50–100ms 避免"同时全冒出来"：

[
  { "id": "title",   "order": 1, "delay": 0    },
  { "id": "subtitle", "order": 1, "delay": 0.1 },
  { "id": "image",   "order": 1, "delay": 0.2 }
]

效果：标题先出 → 100ms 后副标题 → 100ms 后图片，看起来像"链式"但底层共享一次点击。

自定义 keyframes

高级用户可以写 CSS keyframes：

@keyframes my-special {
  0%   { opacity: 0; transform: rotate(-180deg) scale(0); }
  60%  { opacity: 1; transform: rotate(20deg)  scale(1.1); }
  100% { opacity: 1; transform: rotate(0)      scale(1);   }
}

详见「26. 缓动曲线与时长」。

行业建议

行业	推荐组合
教育	fade + 适度 zoom（强调重点）
企业销售	fly-in + bounce（动感、抓眼球）
医疗	fade（专业、稳重）
博物馆	wipe + zoom（叙事性）
军事	fly-in（强势）
营销 H5	bounce + rubber（戏剧化）

下一节讲触发器细节。