Container Transform (容器变换)
别称 Card expand to detail, Expandable card, Morph card to page
卡片展开成完整的详情视图，始终是同一个可见容器在改变形状并显示新内容。
适用场景
列表卡片到详情、悬浮按钮到面板
变体
- card to full screen
- FAB to sheet
- list item to detail
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“容器变换”(Container Transform)过渡，也叫卡片展开到详情(card expand to detail)或可展开卡片(expandable card)。
打开卡片时，同一个容器平滑地扩展成完整的详情视图：旧内容迅速淡出，容器快要展开完时新内容再淡入；关闭时反向播放。
始终保持一个连续的容器，而不是在两个独立的框之间交叉淡化；打开后把焦点移到详情视图里。相似的动效
BC
A
点击试试
Shared Element Transition (共享元素过渡)
别称 Hero transition, View Transition shared element, view-transition-name morph
对应的元素（例如缩略图）在页面之间变换位置和大小。
适用场景
从缩略图进入详情页
在[应用位置]添加“共享元素过渡”(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
进入下一页时，对应的元素（例如缩略图）平滑地移动并放大到新页面上的位置，其余内容交叉淡化；返回时再缩回去。
给两个页面上对应的元素同一个共享标识，确保正确配对；浏览器无法变换时，退回为简单的交叉淡化。A
B
C
点击试试
Lightbox Zoom (灯箱放大)
别称 Image zoom overlay, Medium-style zoom
缩略图从原位置放大，在变暗的背景上居中显示为大图。
适用场景
图库、文章
在[应用位置]添加“灯箱放大”(Lightbox Zoom)，也叫 image zoom overlay 或 Medium-style zoom。
点击缩略图时，它从原位置平滑放大成居中的大图，背后的页面随之变暗退后；关闭时再缩回原来的位置。
支持按 Esc 或点击背景关闭；打开期间把焦点移到大图视图内，关闭后把焦点还给缩略图。ACB
点击试试
Shared Layout Animation (共享布局动画)
别称 layoutId, Shared element (in-page)
元素仿佛移动并缩放到新位置上对应的元素，看起来是同一个对象。
适用场景
选中高亮、缩略图到展开视图
在[应用位置]添加“共享布局动画”(Shared Layout Animation)，也叫页面内共享元素(in-page shared element)。
选中项变化时，元素要从旧位置平滑地移动并缩放到新位置，轻柔地落定，让人看出这是同一个对象而不是两个。
任何时刻只显示一份，移动过程中不要让周围布局跳动。A
Modal Scale-Fade In (弹窗缩放淡入)
别称 Dialog open animation, Zoom-fade dialog
对话框在变暗的页面上方，从中心略微放大并淡入。
适用场景
确认对话框、浮层中的表单
在[应用位置]添加“弹窗缩放淡入”(Modal Scale-Fade In)动画，也叫对话框打开动画(dialog open animation)或缩放淡入对话框(zoom-fade dialog)。
后方页面变暗的同时，对话框从中心略微放大并淡入：快速、含蓄，不要回弹。
每次打开对话框都播放一次，把焦点移入对话框并留在里面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，只用简单的淡入。Component & Layout 中的其他动效
- A
- B
- C
- D
拖动试试
Drag-to-Reorder List (拖拽排序列表)
别称 Reorder, Sortable list
拖动某一项时，其他项滑开让位，并按新的顺序排好。
适用场景
看板、可排序的设置项、播放列表
在[应用位置]添加“拖拽排序列表”(Drag-to-Reorder List)，也叫可排序列表(sortable list)。
被拖动的项直接跟随指针并轻微抬起，其他项平滑地滑开让位；松开后，它迅速落入最近的位置。
同时支持触屏和鼠标，并提供用键盘移动项目的方式，把新位置播报给屏幕阅读器。A
Drawer Slide (抽屉滑入)
别称 Off-canvas, Side sheet, Slide-over, Navigation drawer
侧边面板从左、右或顶部边缘滑入，推开或覆盖页面内容。
适用场景
移动端导航、设置面板、购物车
在[应用位置]添加“抽屉滑入”(Drawer Slide)，也叫画布外菜单(off-canvas)或侧边面板(side sheet)。
面板从侧边滑入并覆盖在内容上方，同时后方页面变暗，速度快、平滑减速；关闭时按同样的方式滑出。
抽屉打开时把键盘焦点留在里面，可以用 Escape 键或点击变暗区域关闭，关闭后把焦点还给打开它的按钮。- A
- B
- C
- D
- E
- F
点击试试
FLIP Layout Animation (FLIP布局动画)
别称 Layout animation, First-Last-Invert-Play
布局变化后，元素平滑地移动到新的位置和尺寸。
适用场景
筛选网格、重新排列的列表
在[应用位置]添加“FLIP布局动画”(FLIP Layout Animation)，也叫布局动画(layout animation)或 First-Last-Invert-Play。
布局变化时，每个元素从旧位置平滑移动到新位置，而不是直接跳过去：开始时快，最后轻柔地落定。
只用 transform 做动画，避免页面每一帧都重新排版；如果用户开启了“减少动态效果”(prefers-reduced-motion)，直接切换到新布局。