Rotate Out (旋转退出)
元素绕一个支点旋转，同时淡出消失。
适用场景
条目的活泼移除
变体
- center
- down-left
- down-right
- up-left
- up-right
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“旋转退出”(Rotate Out)退场动画。
元素绕自身中心旋转略多于半圈，同时淡出：平滑，逐渐加速。
旋转结束后再移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。相似的动效
A
元素向右滚出，同时淡出。
适用场景
列表项的活泼移除
在[应用位置]添加“翻滚退出”(Roll Out)退场动画。
元素像轮子一样边转动边向右滚出，同时淡出：平滑，离开时加速。
等它完全滚走后再从布局中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。A
元素以左上角为铰链摆动、晃荡几下，然后掉出屏幕。
适用场景
以滑稽的方式移除元素
在[应用位置]添加“铰链掉落”(Hinge)退场动画。
元素像螺丝松脱一样以左上角为轴向下摆，来回晃荡，然后一边淡出一边掉出屏幕：缓慢、滑稽、刻意。
让它从其他内容上方掉落，不要挤动布局或产生滚动条，掉落后移除元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。A
Rotate In (旋转进入)
别称 Rotate In Down Left
元素绕某个角或自身中心旋转进入，同时淡入。
适用场景
图标或卡片的活泼入场
在[应用位置]添加“旋转进入”(Rotate In)入场动画，也叫 rotate in down left。
元素从倾斜的角度出发，绕左下角旋转到位，同时淡入：平滑、从容，落定时逐渐减速。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。Entrance & Exit 中的其他动效
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)，则直接在原位显示。A
Slide Out (滑出)
别称 Slide Out Up, Slide Out Down
元素滑出容器边缘后消失。
适用场景
关闭抽屉和面板
在[应用位置]添加“滑出”(Slide Out)退场动画，也叫 slide out up 或 slide out down。
元素保持完全不透明，滑出容器边缘后消失：快速，离开时加速。
在容器边缘处裁切，移出视野后对键盘和屏幕阅读器也隐藏；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。Stagger (交错动画)
别称 Staggered Animation, Cascade
一组元素依次以微小的时间差播放动画，形成波浪般的效果，而不是同时出现。
适用场景
列表、网格、导航菜单和搜索结果
在[应用位置]添加“交错动画”(Stagger)，也叫 staggered animation 或级联(cascade)。
让各项以短而均匀的间隔依次上浮出现，整体看起来像一道快速的波浪，而不是同时出现。
即使列表很长也要让整个过程保持简短；滚动进入视口时只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。