Entrance & Exit

元素从缩小并偏移的状态开始，滑入后放大到完整尺寸。

在[应用位置]添加“回弹进入”(Back In)入场动画，也叫 back in up 或 back in down。
元素以缩小且略微透明的状态从边缘外进入，到达位置后再放大到完整尺寸：一个刻意的两段式动作，而不是快速弹出。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素缩小并滑向一侧边缘，同时淡出。

在[应用位置]添加“回弹退出”(Back Out)退场动画。
元素先在原地稍微缩小，再滑向一侧边缘并淡出：一个刻意的两段式退场，而不是一次快速淡出。
等动画结束后再移除元素，避免布局在动画中途跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即移除。

元素从严重模糊的状态逐渐变清晰，常伴随滑入或淡入。

在[应用位置]添加“模糊进入”(Blur In)入场动画，也叫 text focus in、focus in 或 blur text reveal。
内容从严重模糊且透明的状态开始，在原地逐渐变清晰：柔和、偏慢，没有位移。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示清晰的文字。

元素在淡出或滑出的同时逐渐变模糊。

在[应用位置]添加“模糊退出”(Blur Out)退场动画，也叫 text blur out 或 smoky text dissipate。
内容在原地越来越模糊并逐渐淡出：柔和、偏慢，仿佛消散一般。
等模糊效果结束后再隐藏或移除元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素以超出后回落的弹跳方式进入，可以是放大出现，也可以从边缘落下。

在[应用位置]添加“弹跳进入”(Bounce In)入场动画，也叫 bounce in down 或 bounce in up。
元素从小逐渐放大，略微超过完整尺寸后晃动几下再稳定下来：迅速、有弹性。
只播放一次，以免持续抢夺注意力；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素轻轻弹一下，然后缩小消失或从边缘飞出。

在[应用位置]添加“弹跳退出”(Bounce Out)退场动画。
元素先轻轻下沉，再略微胀大超过原尺寸，然后一边缩小一边淡出：短促、有弹性。
等动画结束后再将它从布局中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

clip-path 或遮罩从边缘或某一点展开，逐步露出图片或文字。

在[应用位置]添加“裁剪显现”(Clip Reveal)入场效果，也叫 mask reveal、wipe reveal 或 image reveal。
让裁剪边缘从左向右扫过，内容保持不动、逐步显露出来：流畅，开始和结束都要柔和。
从一开始就为元素预留空间，避免布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接完整显示。

元素在原位从完全透明变为完全不透明，离开时则反过来。

在[应用位置]添加“淡入淡出”(Fade In / Fade Out)动画，也叫 fade。
元素出现时在原位从完全透明变为完全可见，离开时以同样方式淡出：柔和，不要位移或缩放。
淡出后要确保它无法再被点击或通过键盘聚焦；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则瞬间切换。

元素从一侧移动一小段距离到最终位置，同时淡入。

在[应用位置]添加“方向淡入”(Fade In Directional)入场动画，也叫 fade in left、fade in right 或 fade in down。
元素从一侧移动一小段距离到最终位置，同时淡入：迅速流畅，到位时减速，不要弹跳。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素朝一个方向移开，同时淡出。

在[应用位置]添加“方向淡出”(Fade Out Directional)退场动画，也叫 fade out up 或 fade out down。
元素朝一个方向移动一小段距离并淡出：迅速，离开时逐渐加速。
等淡出结束后再将它从布局中移除，避免相邻内容提前跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素在淡入的同时向上移动一小段距离，仿佛落到自己的位置上。

在[应用位置]添加“上浮淡入”(Fade Up)入场动画，也叫 fade-in-up 或滚动显现(reveal on scroll)。
元素第一次滚动进入视口时，一边轻微上移一边淡入：要含蓄、迅速，不要有弹跳感。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。

元素像故障的霓虹灯一样快速闪烁几下，然后保持可见。

在[应用位置]添加“频闪进入”(Flicker In)入场动画。
元素像故障的霓虹灯一样，以不规则的间隔亮灭几次后保持点亮：干脆的闪烁，没有位移。
只播放一次，闪烁次数要少、速度不能太快，确保对光敏感的人也安全；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以常亮状态显示。

元素绕 Y 轴旋转一整圈，同时稍微靠近观看者再退回。

在[应用位置]添加“翻转”(Flip)动画。
元素绕竖直轴旋转一整圈，同时稍微靠近观看者，然后尺寸微微一缩再回到原位：活泼但简短。
加上透视(perspective)让旋转有纵深感，只播放一次、不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则省略旋转。

元素绕水平轴或垂直轴做 3D 旋转，从侧面朝向转为正对观看者。

在[应用位置]添加“翻转进入”(Flip In)入场动画，也叫 flip in X 或 flip in Y。
元素从侧面朝向开始，绕水平轴旋转到正对观看者，略微转过头再回来后稳定：迅速，带一点晃动。
加上透视(perspective)让旋转有纵深感；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以正面状态显示，不做动画。

元素做 3D 旋转，直到侧面朝向、看不见为止。

在[应用位置]添加“翻转退出”(Flip Out)退场动画，也叫 flip out X 或 flip out Y。
元素先稍微向后倾斜，再绕竖直轴旋转到侧面朝向并消失：迅速、干脆。
加上透视(perspective)让旋转有纵深感，等旋转结束后再移除元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素以左上角为铰链摆动、晃荡几下，然后掉出屏幕。

在[应用位置]添加“铰链掉落”(Hinge)退场动画。
元素像螺丝松脱一样以左上角为轴向下摆，来回晃荡，然后一边淡出一边掉出屏幕：缓慢、滑稽、刻意。
让它从其他内容上方掉落，不要挤动布局或产生滚动条，掉落后移除元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素从缩小且倾斜的状态弹出，略微超出后稳定下来，就像玩偶盒里的弹簧小丑。

在[应用位置]添加“玩偶盒弹出”(Jack In The Box)入场动画。
元素以底边为支点，从很小且倾斜的状态弹出，越过竖直位置左右摇摆，然后稳定下来：有弹性、俏皮。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素带着倾斜从侧面疾速冲入，落定时恢复端正。

在[应用位置]添加“光速进入”(Light Speed In)入场动画，也叫 lightspeed in。
元素像高速飞驰一样倾斜着从侧面疾速冲入，倾斜先反向过冲一次，落定时恢复端正：快速而有戏剧性，末尾减速。
元素还在屏幕外时不要产生横向滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素倾斜着向侧面疾速离开，同时淡出。

在[应用位置]添加“光速退出”(Light Speed Out)退场动画，也叫 lightspeed out。
元素倾斜着向侧面疾速离开，同时淡出：要快，离开时逐渐加速。
越过边缘时不要产生横向滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素从放大、模糊、透明的状态缩小到清晰，像一团烟雾聚拢；离开时则反向进行。

在[应用位置]添加“烟雾进出”(Puff In / Puff Out)动画，也叫 puff。
出现时，元素从放大、模糊、透明的状态缩小到清晰，像一团烟雾慢慢落定；离开时再膨胀成一片模糊并消失：柔和、较快。
放大状态不要挤动布局或产生滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接切换。

元素像轮子一样从左侧滚入，同时淡入。

在[应用位置]添加“翻滚进入”(Roll In)入场动画。
元素像轮子一样边转动边从左侧滚入，同时淡入：平滑，落定时减速。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素向右滚出，同时淡出。

在[应用位置]添加“翻滚退出”(Roll Out)退场动画。
元素像轮子一样边转动边向右滚出，同时淡出：平滑，离开时加速。
等它完全滚走后再从布局中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素绕某个角或自身中心旋转进入，同时淡入。

在[应用位置]添加“旋转进入”(Rotate In)入场动画，也叫 rotate in down left。
元素从倾斜的角度出发，绕左下角旋转到位，同时淡入：平滑、从容，落定时逐渐减速。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素绕一个支点旋转，同时淡出消失。

在[应用位置]添加“旋转退出”(Rotate Out)退场动画。
元素绕自身中心旋转略多于半圈，同时淡出：平滑，逐渐加速。
旋转结束后再移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

元素从容器边缘之外滑入到停靠位置，不带淡入效果。

在[应用位置]添加“滑入”(Slide In)入场动画，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素从容器边缘之外滑到停靠位置，全程保持完全不透明：快速，平滑减速，不要回弹。
在容器边缘处裁切，避免它在外面时遮住相邻元素或产生滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示。

元素滑出容器边缘后消失。

在[应用位置]添加“滑出”(Slide Out)退场动画，也叫 slide out up 或 slide out down。
元素保持完全不透明，滑出容器边缘后消失：快速，离开时加速。
在容器边缘处裁切，移出视野后对键盘和屏幕阅读器也隐藏；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。

一组元素依次以微小的时间差播放动画，形成波浪般的效果，而不是同时出现。

在[应用位置]添加“交错动画”(Stagger)，也叫 staggered animation 或级联(cascade)。
让各项以短而均匀的间隔依次上浮出现，整体看起来像一道快速的波浪，而不是同时出现。
即使列表很长也要让整个过程保持简短；滚动进入视口时只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。

元素从一个点旋转放大，同时淡入。

在[应用位置]添加“漩涡进入”(Swirl In)入场动画，也叫 swirl in forward。
元素从一个点放大到完整尺寸，同时旋转远超一整圈并淡入：开始很快，落定时逐渐减速。
只对单个元素播放一次，不要用于整组元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

字母起初间距很宽且较淡，随后在显现的同时收拢到正常字距。

在[应用位置]添加“字距收拢进入”(Tracking In)文字动画，也叫 text tracking in 或 letter-spacing in。
字母起初间距很宽且较淡，然后逐渐收拢到正常字距并完全显现：平滑，末尾减速。
字距变化期间让文字保持居中且不换行，避免周围布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以正常字距显示。

元素从小而透明的状态放大到完整尺寸，同时淡入。

在[应用位置]添加“缩放进入”(Zoom In)入场动画，也叫 scale in。
元素从小而透明放大到完整尺寸，同时淡入：快速、平滑，不要过冲。
以中心为基点缩放，不影响周围布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。

元素缩小并淡出，直至消失。

在[应用位置]添加“缩放退出”(Zoom Out)退场动画，也叫 scale out。
元素朝中心缩小并淡出，直至消失：快速，逐渐加速。
完全消失后再从布局和键盘焦点中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。