Puff In / Puff Out (烟雾进出)
别称 Puff
元素从放大、模糊、透明的状态缩小到清晰，像一团烟雾聚拢；离开时则反向进行。
适用场景
对象的柔和出现
变体
- in
- out
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“烟雾进出”(Puff In / Puff Out)动画，也叫 puff。
出现时，元素从放大、模糊、透明的状态缩小到清晰，像一团烟雾慢慢落定；离开时再膨胀成一片模糊并消失：柔和、较快。
放大状态不要挤动布局或产生滚动条；如果用户开启了“减少动态效果”(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
Zoom Out (缩放退出)
别称 Scale Out
元素缩小并淡出，直至消失。
适用场景
关闭模态框和移除条目
在[应用位置]添加“缩放退出”(Zoom Out)退场动画，也叫 scale out。
元素朝中心缩小并淡出，直至消失：快速，逐渐加速。
完全消失后再从布局和键盘焦点中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。ABCD
Blur Out (模糊退出)
别称 Text Blur Out, Slide Out Blurred, Smoky Text Dissipate
元素在淡出或滑出的同时逐渐变模糊。
适用场景
柔和的过渡和文字退场
在[应用位置]添加“模糊退出”(Blur Out)退场动画，也叫 text blur out 或 smoky text dissipate。
内容在原地越来越模糊并逐渐淡出：柔和、偏慢，仿佛消散一般。
等模糊效果结束后再隐藏或移除元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。A
Zoom In (缩放进入)
别称 Scale In, Zoom In Up, Zoom In Down
元素从小而透明的状态放大到完整尺寸，同时淡入。
适用场景
模态框、图片灯箱、弹出层
在[应用位置]添加“缩放进入”(Zoom In)入场动画，也叫 scale in。
元素从小而透明放大到完整尺寸，同时淡入：快速、平滑，不要过冲。
以中心为基点缩放，不影响周围布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。Entrance & Exit 中的其他动效
A
元素像轮子一样从左侧滚入，同时淡入。
适用场景
列表项的活泼入场
在[应用位置]添加“翻滚进入”(Roll In)入场动画。
元素像轮子一样边转动边从左侧滚入，同时淡入：平滑，落定时减速。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。A
元素向右滚出，同时淡出。
适用场景
列表项的活泼移除
在[应用位置]添加“翻滚退出”(Roll Out)退场动画。
元素像轮子一样边转动边向右滚出，同时淡出：平滑，离开时加速。
等它完全滚走后再从布局中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。A
Rotate In (旋转进入)
别称 Rotate In Down Left
元素绕某个角或自身中心旋转进入，同时淡入。
适用场景
图标或卡片的活泼入场
在[应用位置]添加“旋转进入”(Rotate In)入场动画，也叫 rotate in down left。
元素从倾斜的角度出发，绕左下角旋转到位，同时淡入：平滑、从容，落定时逐渐减速。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。