动画化模态框/对话框/浮层时…

适用于为模态框、对话框、popover 或遮罩内容添加平滑入场和退场动画的场景。

适用场景

解决思路

1. 入场时让 modal 从 scale(0.9) 过渡到 1.0，形成轻微扩张感；退场反向执行，保持克制专业。
2. 触发元素（按钮）在 modal 出现前先有反应：按钮短暂缩小，然后 modal 从该点出现。
3. 用 backdrop 变暗（opacity 0.5-0.7）聚焦注意力；背景内容可轻微模糊（4-8px）；让 modal 成为视觉主角。
4. 定义 hidden、entering、visible、exiting 状态，为每个状态设置清晰关键帧，用 pose-to-pose 保证动画可预测、可控。
5. modal 容器先到达，内容在 50-100ms 后淡入；关闭按钮结尾可轻微弹跳；表单字段错峰出现。
6. 入场用 `ease-out`（减速进入）；退场用 `ease-in`（加速退出）；顺滑带弹性的入场用 `cubic-bezier(0.16, 1, 0.3, 1)`。
7. 如果 modal 从按钮位置出现，让运动路径朝中心画弧，而不是直线移动，使运动更有机。
8. modal 缩放进入（主），backdrop 淡入（次），内容错峰出现（第三层），各动作互相支持且不抢戏。
9. backdrop 淡入淡出用 200-250ms。
10. modal 入场用 250-350ms。
11. modal 退场用 200ms，退场比入场更快。
12. 内容错峰每项间隔 30-50ms。
13. 错误时抖动用 300ms。
14. 重要提示用更戏剧化入场；轻微过冲 scale(1.02) 后再稳定到 1.0；错误 modal 可短暂抖动。
15. modal 阴影要匹配界面光源；保持一致的 border-radius；动画期间内容不应溢出。
16. 让入场顺滑以显得精致；从触发点开始动画会更连贯；避免突兀出现；重视 modal 过渡。
17. 给 `.modal-backdrop` 设置 `transition: opacity 250ms ease-out;`。
18. 给 `.modal` 设置 `animation: modalEnter 300ms cubic-bezier(0.16, 1, 0.3, 1);`。
19. 定义 `@keyframes modalEnter`，从 `opacity: 0; transform: scale(0.9) translateY(20px);` 到 `opacity: 1; transform: scale(1) translateY(0);`。
20. 使用 `transform` 做 scale、translate，并设置原点。
21. 使用 `opacity` 做淡入淡出。
22. 使用 `backdrop-filter` 模糊背景。
23. 使用 `animation` 编排关键帧序列。
24. 使用 `transform-origin` 指定动画源点。

适用边界 · 注意事项

• 用户或系统启用减少动态效果（prefers-reduced-motion）时，不应强行使用这些动画。
• 普通内联元素或不需要吸引注意力的内容，不应套用夸张的 modal 动画。
• 低端设备或性能敏感场景中，应谨慎使用 backdrop-filter、模糊和大量错峰动画，避免卡顿。