提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“缩放退出”(Zoom Out)退场动画,也叫 scale out。
元素朝中心缩小并淡出,直至消失:快速,逐渐加速。
完全消失后再从布局和键盘焦点中移除;如果用户开启了“减少动态效果”(prefers-reduced-motion),则立即隐藏。相似的动效
A
Puff In / Puff Out (烟雾进出)
别称 Puff
元素从放大、模糊、透明的状态缩小到清晰,像一团烟雾聚拢;离开时则反向进行。
适用场景
对象的柔和出现
在[应用位置]添加“烟雾进出”(Puff In / Puff Out)动画,也叫 puff。
出现时,元素从放大、模糊、透明的状态缩小到清晰,像一团烟雾慢慢落定;离开时再膨胀成一片模糊并消失:柔和、较快。
放大状态不要挤动布局或产生滚动条;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接切换。A
元素缩小并滑向一侧边缘,同时淡出。
适用场景
关闭卡片
在[应用位置]添加“回弹退出”(Back 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
将鼠标悬停在上面
Shrink (缩小)
别称 Scale Down
指针停在元素上时,元素平滑地略微缩小。
适用场景
按钮、磁贴
在[应用位置]添加“缩小”(Shrink)悬停效果,也叫缩小(scale down)。
指针停在元素上时,元素平滑地略微缩小,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。Entrance & Exit 中的其他动效
A
Back In (回弹进入)
别称 Back In Up, Back In Down
元素从缩小并偏移的状态开始,滑入后放大到完整尺寸。
适用场景
首屏主视觉元素和卡片
在[应用位置]添加“回弹进入”(Back In)入场动画,也叫 back in up 或 back in down。
元素以缩小且略微透明的状态从边缘外进入,到达位置后再放大到完整尺寸:一个刻意的两段式动作,而不是快速弹出。
只播放一次;如果用户开启了“减少动态效果”(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),则直接显示清晰的文字。