Shared Element Transition (共享元素过渡)
别称 Hero transition, View Transition shared element, view-transition-name morph
对应的元素（例如缩略图）在页面之间变换位置和大小。
适用场景
从缩略图进入详情页
变体
- same-document
- cross-document
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“共享元素过渡”(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
进入下一页时，对应的元素（例如缩略图）平滑地移动并放大到新页面上的位置，其余内容交叉淡化；返回时再缩回去。
给两个页面上对应的元素同一个共享标识，确保正确配对；浏览器无法变换时，退回为简单的交叉淡化。相似的动效
BC
A
A
点击试试
Container Transform (容器变换)
别称 Card expand to detail, Expandable card, Morph card to page
卡片展开成完整的详情视图，始终是同一个可见容器在改变形状并显示新内容。
适用场景
列表卡片到详情、悬浮按钮到面板
在[应用位置]添加“容器变换”(Container Transform)过渡，也叫卡片展开到详情(card expand to detail)或可展开卡片(expandable card)。
打开卡片时，同一个容器平滑地扩展成完整的详情视图：旧内容迅速淡出，容器快要展开完时新内容再淡入；关闭时反向播放。
始终保持一个连续的容器，而不是在两个独立的框之间交叉淡化；打开后把焦点移到详情视图里。ACB
点击试试
Shared Layout Animation (共享布局动画)
别称 layoutId, Shared element (in-page)
元素仿佛移动并缩放到新位置上对应的元素，看起来是同一个对象。
适用场景
选中高亮、缩略图到展开视图
在[应用位置]添加“共享布局动画”(Shared Layout Animation)，也叫页面内共享元素(in-page shared element)。
选中项变化时，元素要从旧位置平滑地移动并缩放到新位置，轻柔地落定，让人看出这是同一个对象而不是两个。
任何时刻只显示一份，移动过程中不要让周围布局跳动。A
B
C
点击试试
Lightbox Zoom (灯箱放大)
别称 Image zoom overlay, Medium-style zoom
缩略图从原位置放大，在变暗的背景上居中显示为大图。
适用场景
图库、文章
在[应用位置]添加“灯箱放大”(Lightbox Zoom)，也叫 image zoom overlay 或 Medium-style zoom。
点击缩略图时，它从原位置平滑放大成居中的大图，背后的页面随之变暗退后；关闭时再缩回原来的位置。
支持按 Esc 或点击背景关闭；打开期间把焦点移到大图视图内，关闭后把焦点还给缩略图。- 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)，直接切换到新布局。Page Transition 中的其他动效
A
B
点击试试
Slide Page Transition (页面滑动过渡)
别称 Push / pop, Directional slide, Slide-over route
新页面从一侧滑入，旧页面同时滑出，方向跟随导航层级。
适用场景
移动端风格的前进/返回导航
在[应用位置]添加“页面滑动过渡”(Slide Page Transition)，也叫 push / pop 或 directional slide。
前进时，新页面从侧边推入，旧页面从另一侧滑出；后退时两者反向移动：平滑，起止都要缓和。
方向要与导航层级对应，包括浏览器的返回按钮；滑动过程中页面不能出现横向滚动。A
B
点击试试
Zoom Page Transition (页面缩放过渡)
别称 Scale transition, Zoom in / out
旧页面放大或缩小并淡出，新页面同时缩放到位。
适用场景
在层级中深入或返回
在[应用位置]添加“页面缩放过渡”(Zoom Page Transition)，也叫 scale transition 或 zoom in / out。
深入时，旧页面微微放大并淡出，新页面从稍小的尺寸放大到位；返回时反向缩小：平滑、迅速。
缩放幅度要含蓄，保证内容全程可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。A
B
点击试试
Circular Reveal (圆形显现)
别称 Clip-path circle expand, Theme toggle reveal
新视图在一个从点击位置向外扩展的圆形中显现。
适用场景
深色/浅色主题切换、页面切换
在[应用位置]添加“圆形显现”(Circular Reveal)过渡，也叫 clip-path circle expand 或 theme toggle reveal。
新视图在一个从被按下的控件处向外扩展的圆形中出现，直到覆盖整个区域：平滑、匀稳，起止都要缓和。
圆形要正好从按下控件的位置开始；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不用圆形，直接切换。