Preloader Curtain Lift (开屏加载揭幕)
别称 Splash screen, Intro loader
带有 Logo 或计数器的全屏开场层滑走或淡出，露出网站。
适用场景
网站首次加载
变体
- slide-up
- fade
- counter then reveal
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“开屏加载揭幕”(Preloader Curtain Lift)，也叫 splash screen 或 intro loader。
全屏开场层在加载条填满期间保持不动，然后平滑地向上滑走，露出下方轻柔落定的网站。
只在首次加载时播放，停留时间绝不能超过实际加载所需；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接跳过。相似的动效
A
B
点击试试
Curtain / Panel Wipe (幕布擦除)
别称 Page wipe, Curtain reveal, Stripe transition, Staggered panels
实色面板扫过屏幕遮住旧页面，随后收回，露出新页面。
适用场景
作品集和设计公司网站的页面跳转
在[应用位置]添加“幕布擦除”(Curtain / Panel Wipe)页面过渡，也叫 page wipe 或 staggered panels。
实色面板依次扫入，遮住旧页面；页面在完全被遮住时切换，然后面板继续移出视野，露出新页面：大胆而流畅。
面板遮住旧页面之前绝不能露出新页面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。- %
Number Ticker (数字递增)
别称 Count Up, Animated Counter, Number Counter, countUp
数字进入可见区域时，从起始值计数到目标值。
适用场景
统计数据、KPI 模块
在[应用位置]添加“数字递增”(Number Ticker)，也叫 count up 或 animated counter。
数字进入视口时，从零计数到目标值，开始时快，接近终点时柔和地放慢。
使用等宽数字，避免周围内容抖动；只计数一次；对屏幕阅读器以及开启了“减少动态效果”(prefers-reduced-motion)的用户，直接给出最终数值。A
Slide Out (滑出)
别称 Slide Out Up, Slide Out Down
元素滑出容器边缘后消失。
适用场景
关闭抽屉和面板
在[应用位置]添加“滑出”(Slide Out)退场动画，也叫 slide out up 或 slide out down。
元素保持完全不透明，滑出容器边缘后消失：快速，离开时加速。
在容器边缘处裁切，移出视野后对键盘和屏幕阅读器也隐藏；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。Page Transition 中的其他动效
A
B
点击试试
Shared Axis (共享轴)
别称 Shared axis X/Y/Z
旧内容和新内容沿 X、Y 或 Z 轴一起移动并伴随淡入淡出，以表现空间关系。
适用场景
分步流程、同级导航、逐层深入
在[应用位置]添加“共享轴”(Shared Axis)页面过渡，也叫 shared axis X/Y/Z。
前进时，旧内容向一侧滑动一小段并快速淡出，新内容从另一侧滑入并紧随其后淡入；后退时方向相反。
位移要短，只需暗示方向；轴向要与导航对应：同级用横向，分步用纵向，逐层深入用纵深方向。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
点击试试
Slide Page Transition (页面滑动过渡)
别称 Push / pop, Directional slide, Slide-over route
新页面从一侧滑入，旧页面同时滑出，方向跟随导航层级。
适用场景
移动端风格的前进/返回导航
在[应用位置]添加“页面滑动过渡”(Slide Page Transition)，也叫 push / pop 或 directional slide。
前进时，新页面从侧边推入，旧页面从另一侧滑出；后退时两者反向移动：平滑，起止都要缓和。
方向要与导航层级对应，包括浏览器的返回按钮；滑动过程中页面不能出现横向滚动。