Shared Layout Animation (共享布局动画)

对应的元素（例如缩略图）在页面之间变换位置和大小。

在[应用位置]添加“共享元素过渡”(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
进入下一页时，对应的元素（例如缩略图）平滑地移动并放大到新页面上的位置，其余内容交叉淡化；返回时再缩回去。
给两个页面上对应的元素同一个共享标识，确保正确配对；浏览器无法变换时，退回为简单的交叉淡化。

布局变化后，元素平滑地移动到新的位置和尺寸。

在[应用位置]添加“FLIP布局动画”(FLIP Layout Animation)，也叫布局动画(layout animation)或 First-Last-Invert-Play。
布局变化时，每个元素从旧位置平滑移动到新位置，而不是直接跳过去：开始时快，最后轻柔地落定。
只用 transform 做动画，避免页面每一帧都重新排版；如果用户开启了“减少动态效果”(prefers-reduced-motion)，直接切换到新布局。

下划线或胶囊形背景从旧标签滑动到新选中的标签。

在[应用位置]添加“标签指示条滑动”(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
选中新标签时，下划线从旧标签滑到新标签，快速并平滑减速；如果两个标签宽度不同，就顺势伸缩到新标签的宽度。
保持正确的标签页语义并支持方向键切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，指示条直接移过去，不做滑动。

卡片展开成完整的详情视图，始终是同一个可见容器在改变形状并显示新内容。

在[应用位置]添加“容器变换”(Container Transform)过渡，也叫卡片展开到详情(card expand to detail)或可展开卡片(expandable card)。
打开卡片时，同一个容器平滑地扩展成完整的详情视图：旧内容迅速淡出，容器快要展开完时新内容再淡入；关闭时反向播放。
始终保持一个连续的容器，而不是在两个独立的框之间交叉淡化；打开后把焦点移到详情视图里。

简短消息从屏幕边缘滑入或淡入，停留片刻后离开；堆叠的提示会移动让出位置。

在[应用位置]添加“消息提示滑入”(Toast Slide-In)，也叫 snackbar 或 toast notification。
每条消息从屏幕边缘向上滑入并淡入，平滑减速；有新提示出现时，已显示的提示要平滑移动让出位置。
在不抢走焦点的前提下把消息播报给屏幕阅读器，显示时间要足够阅读，鼠标悬停或获得焦点时暂停自动关闭。

悬停片刻后，一个小标签在元素旁一边轻移到位一边淡入。

在[应用位置]添加“文字提示淡入”(Tooltip Fade)，也叫 tooltip reveal。
鼠标悬停片刻后，标签在元素旁一边轻移到位一边淡入；指针离开时立即快速消失，不要延迟。
键盘聚焦时也要显示，按 Escape 可关闭，并把它与元素关联起来，让屏幕阅读器能读出。