Slide Out (滑出)

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

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

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

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

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

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

向下滚动时头部隐藏，向上滚动时重新出现。

在[应用位置]添加“滚动隐藏头部”(Hide on Scroll Header)，也叫 headroom 或自动隐藏导航栏(auto-hide navbar)。
用户向下滚动时，头部要向上滑出视野；只要向上滚动，就滑回来：快速、流畅，根据滚动方向而不是距离来反应。
在页面最顶部时始终显示，忽略细微的滚动抖动，并且当头部内有元素获得键盘焦点时保持显示。

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

在[应用位置]添加“交错动画”(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)，则直接以正常字距显示。