Fade Up (上浮淡入)
别称 Fade In Up, Reveal on Scroll
元素在淡入的同时向上移动一小段距离，仿佛落到自己的位置上。
适用场景
滚动时出现的章节标题、卡片和图片
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“上浮淡入”(Fade Up)入场动画，也叫 fade-in-up 或滚动显现(reveal on scroll)。
元素第一次滚动进入视口时，一边轻微上移一边淡入：要含蓄、迅速，不要有弹跳感。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。相似的动效
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
Slide In (滑入)
别称 Slide In Up, Slide In Down, Slide In Left, Slide In Right
元素从容器边缘之外滑入到停靠位置，不带淡入效果。
适用场景
抽屉、侧边栏、横幅
在[应用位置]添加“滑入”(Slide In)入场动画，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素从容器边缘之外滑到停靠位置，全程保持完全不透明：快速，平滑减速，不要回弹。
在容器边缘处裁切，避免它在外面时遮住相邻元素或产生滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示。Stagger (交错动画)
别称 Staggered Animation, Cascade
一组元素依次以微小的时间差播放动画，形成波浪般的效果，而不是同时出现。
适用场景
列表、网格、导航菜单和搜索结果
在[应用位置]添加“交错动画”(Stagger)，也叫 staggered animation 或级联(cascade)。
让各项以短而均匀的间隔依次上浮出现，整体看起来像一道快速的波浪，而不是同时出现。
即使列表很长也要让整个过程保持简短；滚动进入视口时只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。A
Fade In / Fade Out (淡入淡出)
别称 Fade
元素在原位从完全透明变为完全不透明，离开时则反过来。
适用场景
弹窗、轻提示和页面内容的出现
在[应用位置]添加“淡入淡出”(Fade In / Fade Out)动画，也叫 fade。
元素出现时在原位从完全透明变为完全可见，离开时以同样方式淡出：柔和，不要位移或缩放。
淡出后要确保它无法再被点击或通过键盘聚焦；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则瞬间切换。Entrance & Exit 中的其他动效
ABCD
元素像故障的霓虹灯一样快速闪烁几下，然后保持可见。
适用场景
霓虹和复古风格的文字效果
在[应用位置]添加“频闪进入”(Flicker In)入场动画。
元素像故障的霓虹灯一样，以不规则的间隔亮灭几次后保持点亮：干脆的闪烁，没有位移。
只播放一次，闪烁次数要少、速度不能太快，确保对光敏感的人也安全；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以常亮状态显示。A
元素绕 Y 轴旋转一整圈，同时稍微靠近观看者再退回。
适用场景
吸引注意地展示卡片或徽标
在[应用位置]添加“翻转”(Flip)动画。
元素绕竖直轴旋转一整圈，同时稍微靠近观看者，然后尺寸微微一缩再回到原位：活泼但简短。
加上透视(perspective)让旋转有纵深感，只播放一次、不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则省略旋转。A
Flip In (翻转进入)
别称 Flip In X, Flip In Y
元素绕水平轴或垂直轴做 3D 旋转，从侧面朝向转为正对观看者。
适用场景
卡片和磁贴的显现
在[应用位置]添加“翻转进入”(Flip In)入场动画，也叫 flip in X 或 flip in Y。
元素从侧面朝向开始，绕水平轴旋转到正对观看者，略微转过头再回来后稳定：迅速，带一点晃动。
加上透视(perspective)让旋转有纵深感；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以正面状态显示，不做动画。