Flip In (翻转进入)

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

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

卡片绕轴翻转半圈，露出背面。

在[应用位置]添加“卡片翻转”(Card Flip)效果，也叫 flip card 或 card flip 3D。
指针停在卡片上时，卡片绕竖直轴透视翻转、露出背面；指针移开后翻回来：平滑而稳定。
隐藏每个面的背侧，避免正反两面互相透出；键盘焦点和触屏设备上的轻点也要能触发翻转。

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

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

字母或单词绕轴做 3D 翻转，露出背面的下一段文字。

在[应用位置]添加“文字3D翻转”(Text 3D Flip)悬停效果，也叫 3D flip text reveal。
指针移到文字上时，每个字母绕水平轴做 3D 翻转，露出另一面的新字母，一个接一个快速顺滑地扫过；指针移开时再翻回来。
翻转过程中保持文本框尺寸不变，键盘聚焦时也显示同样的效果。

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

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

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

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