别称 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),则直接在原位显示。
悬停时,元素向一侧斜切变形。
在[应用位置]添加“斜切”(Skew)悬停效果。
指针停在元素上时,元素向一侧斜切成轻微倾斜的样子,移开后恢复端正:快速而流畅。
倾斜时文字仍要清晰可读,不要让周围的布局发生位移,键盘焦点时也显示同样的效果。
别称 Back In Up, Back In Down
元素从缩小并偏移的状态开始,滑入后放大到完整尺寸。
在[应用位置]添加“回弹进入”(Back In)入场动画,也叫 back in up 或 back in down。
元素以缩小且略微透明的状态从边缘外进入,到达位置后再放大到完整尺寸:一个刻意的两段式动作,而不是快速弹出。
只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接在原位显示,不做动画。
元素倾斜着向侧面疾速离开,同时淡出。
在[应用位置]添加“光速退出”(Light Speed Out)退场动画,也叫 lightspeed out。
元素倾斜着向侧面疾速离开,同时淡出:要快,离开时逐渐加速。
越过边缘时不要产生横向滚动条;如果用户开启了“减少动态效果”(prefers-reduced-motion),则立即隐藏。