Jack In The Box (玩偶盒弹出)

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

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

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

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

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

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

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

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