Lightbox Zoom (灯箱放大)

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

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

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

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

对话框在变暗的页面上方，从中心略微放大并淡入。

在[应用位置]添加“弹窗缩放淡入”(Modal Scale-Fade In)动画，也叫对话框打开动画(dialog open animation)或缩放淡入对话框(zoom-fade dialog)。
后方页面变暗的同时，对话框从中心略微放大并淡入：快速、含蓄，不要回弹。
每次打开对话框都播放一次，把焦点移入对话框并留在里面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，只用简单的淡入。

悬停时图片在框内放大，有时还会随指针平移。

在[应用位置]添加“图片悬停放大”(Hover Zoom)效果，也叫 image zoom on hover 或 zoom-pan。
指针停在图片上时，图片在框内缓慢平滑地放大，框的尺寸保持不变；指针移开后平滑复原。
把图片裁剪在框内，不要溢出布局；键盘焦点时也显示同样的放大效果。

圆形镜片跟随指针，显示图片局部的放大画面。

在[应用位置]添加“放大镜”(Magnifier Lens)，也叫 lens 或 loupe。
一个圆形镜片无延迟地紧贴在指针正下方，显示其下方那部分图片的放大画面。
放大画面要与指针下的确切位置对齐；在触屏设备上，手指按住图片时显示镜片。

拖动分隔线，一侧显示一张图片，另一侧显示另一张。

在[应用位置]添加“前后对比滑块”(Before-After Slider)，也叫 image comparison slider 或 compare slider。
两张图片上下叠放，拖动一条竖直分隔线时，一张露出更多、另一张露出更少；分隔线紧跟指针，没有延迟。
分隔线初始位于中间，并支持触摸和方向键操作。