Fade In / Fade Out (淡入淡出)
别称 Fade
元素在原位从完全透明变为完全不透明，离开时则反过来。
适用场景
弹窗、轻提示和页面内容的出现
变体
- in
- out
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“淡入淡出”(Fade In / Fade Out)动画，也叫 fade。
元素出现时在原位从完全透明变为完全可见，离开时以同样方式淡出：柔和，不要位移或缩放。
淡出后要确保它无法再被点击或通过键盘聚焦；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则瞬间切换。相似的动效
ABCD
Blur In (模糊进入)
别称 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素从严重模糊的状态逐渐变清晰，常伴随滑入或淡入。
适用场景
标题和首屏文字的显现
在[应用位置]添加“模糊进入”(Blur In)入场动画，也叫 text focus in、focus in 或 blur text reveal。
内容从严重模糊且透明的状态开始，在原地逐渐变清晰：柔和、偏慢，没有位移。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示清晰的文字。A
B
点击试试
Fade Through (淡出淡入)
别称 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
旧内容先完全淡出，新内容再带着轻微缩放淡入。
适用场景
在互不相关的页面之间切换
在[应用位置]添加“淡出淡入”(Fade Through)页面过渡，也叫 fade-through transition 或 out-in route transition。
旧内容先快速、完全地淡出，然后新内容一边微微放大到位一边淡入。
两者绝不能重叠，新内容放大时布局也不能发生位移。A
B
点击试试
Crossfade Page Transition (页面交叉淡化)
别称 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
旧页面淡出的同时，新页面在同一区域淡入。
适用场景
默认的路由切换
在[应用位置]添加“页面交叉淡化”(Crossfade Page Transition)，也叫 cross-dissolve 或 fade transition。
导航时，旧页面淡出，新页面同时在同一区域淡入：柔和，而且相当快。
让两个页面保持在同一位置，淡化过程中不能有任何位移；切换后把焦点移到新页面的主标题上。Fade Up (上浮淡入)
别称 Fade In Up, Reveal on Scroll
元素在淡入的同时向上移动一小段距离，仿佛落到自己的位置上。
适用场景
滚动时出现的章节标题、卡片和图片
在[应用位置]添加“上浮淡入”(Fade Up)入场动画，也叫 fade-in-up 或滚动显现(reveal on scroll)。
元素第一次滚动进入视口时，一边轻微上移一边淡入：要含蓄、迅速，不要有弹跳感。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。Entrance & Exit 中的其他动效
A
Fade In Directional (方向淡入)
别称 Fade In Down, Fade In Left, Fade In Right
元素从一侧移动一小段距离到最终位置，同时淡入。
适用场景
加载或滚动时出现的区块和卡片
在[应用位置]添加“方向淡入”(Fade In Directional)入场动画，也叫 fade in left、fade in right 或 fade in down。
元素从一侧移动一小段距离到最终位置，同时淡入：迅速流畅，到位时减速，不要弹跳。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。A
Fade Out Directional (方向淡出)
别称 Fade Out Up, Fade Out Down
元素朝一个方向移开，同时淡出。
适用场景
关闭通知和卡片
在[应用位置]添加“方向淡出”(Fade Out Directional)退场动画，也叫 fade out up 或 fade out down。
元素朝一个方向移动一小段距离并淡出：迅速，离开时逐渐加速。
等淡出结束后再将它从布局中移除，避免相邻内容提前跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。