实现通知、Toast、告警动画时…

适用于为通知、Toast、告警、Snackbar 或系统消息设计入场、停留、退场动画，让它们吸引注意又不过度打扰。

适用场景

解决思路

1. 挤压与拉伸：让 Toast 入场撞击时先轻微压缩，再回弹拉伸，形成从屏幕外到达的“落地”感。
2. 预期：自动消失前，让 Toast 先轻微收缩到 95% scale，持续 100ms，向用户提示即将离开。
3. 舞台调度：通知固定在一致位置出现；用颜色和图标区分信息、成功、警告、错误的重要层级。
4. 直进与姿态到姿态：定义进入、可见、退出、堆叠状态；为入场、注意提示（如需要）和退场设置清晰关键帧。
5. 跟随与重叠动作：容器到达后图标再动画，例如对勾绘制、铃铛摇摆；自动消失进度条跟随 Toast 入场启动。
6. 缓入缓出：入场用 ease-out（快进慢停），退场用 ease-in（慢起快出）；弹跳感使用 cubic-bezier(0.68, -0.55, 0.27, 1.55)。
7. 弧线：从角落滑入的 Toast 可走轻微弧线；铃铛图标应沿弧线摆动，而不是僵硬旋转。
8. 次要动作：Toast 滑入为主要动作时，同时让阴影出现、图标动画、进度条启动，形成层次。
9. 时长—Toast 入场：200-300ms。
10. 时长—Toast 退场：150-250ms。
11. 时长—自动消失延迟：3000-5000ms。
12. 时长—注意脉冲：1000ms 循环。
13. 时长—成功对勾绘制：300ms。
14. 时长—堆叠重排：200ms。
15. 夸张：错误通知可抖动或红色脉冲；关键告警可用更大、更粗的动画；动画强度与紧急/重要程度匹配。
16. 扎实绘图：保持 Toast 尺寸一致；图标清晰；进度条平滑，使用 transforms，而不是 width。
17. 吸引力：通知动画平滑才显得精致；突兀弹窗会惹烦用户；良好动画的 Toast 体现专业度。
18. CSS 实现—.toast 入场：animation: toastEnter 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
19. CSS 实现—.toast.exiting 退场：animation: toastExit 200ms ease-in forwards;
20. CSS 实现—@keyframes toastEnter：from { opacity: 0; transform: translateY(-100%) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); }
21. CSS 实现—@keyframes toastExit：to { opacity: 0; transform: translateX(100%); }
22. CSS 实现—.toast-progress：transform-origin: left; animation: progress 4000ms linear forwards;
23. 关键属性—transform：使用 translate、scale。
24. 关键属性—opacity：使用淡入淡出。
25. 关键属性—animation：编排入场/退场序列。
26. 关键属性—transform-origin：用于进度条。
27. 关键属性—box-shadow：表现深度。

适用边界 · 注意事项

• 不要用于需要系统级、强制、不可忽略的关键告警；这类应使用原生/模态告警。
• 用户开启 prefers-reduced-motion 或设备性能受限时，不要使用弹跳、抖动、循环脉冲等动画。
• 不要对所有低优先级通知都使用夸张动画，以免抢占注意力。