渐入渐出Fade In / Out
你可能会说
切换内容的时候，让旧的淡出、新的淡入。
渐入渐出是一种通过改变透明度让内容出现或离开的基础动效提示框、卡片或弹窗进入和退出时可用 opacity 的淡入淡出，视觉负担较低。它仍要配合正确的阅读顺序、点击和最终隐藏状态；如果需要表达内容来自哪个方向或层级，滑动或缩放可能更清楚。
组成结构 · Anatomy
transform: translateY(8px)animation-duration: .2s
从 0 到 1，控制元素由透明变为可见
入场配上移几像素，更自然
按内容距离、任务紧迫度与减少动态效果偏好设定，不存在通用固定毫秒数
常见变体 · Variants
纯淡入Pure Fade
遮罩与占位内容安静出现
淡入上移Fade In Up
卡片弹窗入场，最自然
交叉淡化Cross Fade
轮播与 Tab 内容切换
典型使用场景
弹窗与遮罩入场
遮罩与弹窗同步淡入，并用轻微位移表达进入方向
提示出现与消失
✓ 保存成功
入场 fade-in，时长按任务调整
✓ 保存成功
退场 fade-out，可采用更快节奏
Tab 内容切换
简介
评论 12
相关文章
新消息：通过短暂入场动效提示列表新增了一项
旧内容（残影）淡出、新内容淡入，交叉淡化不打断视线
页面内容初次呈现
300ms
→
首屏内容整体淡入 + 轻微上移，不闪不跳
延伸阅读 · 权威出处