transitions-dev

Transitions.dev

32 个可移植的 CSS 过渡效果，均使用 t-* 选择器命名空间，并配有语义化的 CSS 自定义属性。即插即用：粘贴代码片段，接入文档中说明的 HTML 钩子，即可完成。无需依赖框架，不含仅用于演示的标记，且每个代码片段都带有 prefers-reduced-motion 防护。

快速参考

过渡效果	使用场景	参考
卡片尺寸调整	布局状态变化时，对容器的宽度或高度进行补间动画。	01-card-resize.md
数字弹入	数字更新时，让每个数字带着模糊滑动效果重新进入。	02-number-pop-in.md
通知徽标	将小徽标滑入触发器，并让圆点弹出。	03-notification-badge.md
文本状态切换	通过模糊的上下过渡，在原位切换文本。	04-text-states-swap.md
菜单下拉	打开一个感知原点、从触发器处展开的下拉菜单。	05-menu-dropdown.md
模态框打开 / 关闭	打开模态对话框时放大，关闭时以更柔和的缩小效果呈现。	06-modal.md
面板显现	通过交叉模糊效果将面板滑入指定区域。	07-panel-reveal.md
页面并排切换	在两个并排页面之间滑动切换（列表 ↔ 详情，第 1 步 ↔ 第 2 步）。	08-page-side-by-side.md
图标切换	在同一位置交叉淡化两个图标，并加入模糊和缩放效果。	09-icon-swap.md
成功勾选	组合淡入 + 旋转 + Y 轴弹跳 + 路径描边动画，庆祝操作完成。	10-success-check.md
头像组悬停	一排项目按距离逐渐抬起，返回时带有弹性弹簧效果。	11-avatar-group-hover.md
错误状态抖动	使用分段三次贝塞尔曲线抖动，并自动恢复边框和消息。	12-error-state-shake.md
输入内容清除并溶解	清空文本字段时，让文本飞出，并为每个单词添加拖尾效果。	13-input-clear-dissolve.md
骨架屏加载与显现	让占位内容脉动，然后通过交叉淡化 + 交叉模糊切换为已加载内容。	14-skeleton-reveal.md
闪光文本	循环扫过灰暗文本上的高亮带（纯 CSS）。	15-shimmer-text.md
标签页滑动	在分段控件的标签页之间滑动活动胶囊。	16-tabs-sliding.md
工具提示打开 / 关闭	延迟淡入并缩放，立即淡出，并在触发器之间移动。	17-tooltip.md
文本显现	堆叠的文本行依次模糊上升，随后安静地淡出。	18-texts-reveal.md
卡片悬停倾斜	让卡片在 3D 中朝指针倾斜，并显示由光标跟踪的眩光。	19-card-tilt.md
加号变形为菜单	将圆形触发器变形为它所打开的菜单 / 面板。	20-plus-menu-morph.md
手风琴展开	通过 grid-rows 展开 / 收起面板，并翻转 V 形箭头。	21-accordion.md
Toast 打开 / 关闭	让 Toast 从下方升起，并带有淡入 + 交叉模糊效果；进入速度慢于退出。	22-toast.md
点赞按钮	点赞时让心形填充，并伴随弹出和粒子爆发效果。	23-like-button.md
悬停了解更多	悬停时滑动 V 形箭头，并将两侧展开成箭头。	24-learn-more-hover.md
复选框勾选	填充方框，然后描绘勾号笔画。	25-checkbox-check.md
旋转计数器	以垂直运动模糊效果旋转老虎机式数字转轮。	26-spinning-counter.md
切换开关	让开关滑块移动，并带有双重弹跳过冲效果。	27-toggle.md
思考状态	状态保持期间让状态行闪烁，然后切换到下一个状态。	28-thinking-states.md
推理流	循环显示 Agent 推理记录，每次向上滚动两行。	29-reasoning-stream.md
流式文本	通过柔和的交叉模糊效果，逐个呈现流式传输的单词。	30-streaming-text.md
矩阵点加载器	让 4×4 点阵以扫描 / 闪烁 / 环绕 / 脉动模式运行。	31-matrix-loader.md
横幅堆叠	像 Toast 一样堆叠横幅——新横幅升起，旧横幅向后推移。	32-banner-stacking.md
文本变形	保留两个标签共有的字母，仅对变化部分进行交叉模糊，并平滑调整其宽度。	33-text-morph.md
柔和文本切换	在原位同时显示新旧值，通过交叉模糊切换到新值，不产生移动。	34-text-swap-soft.md
环形图	绘制具有均匀间隙和圆角的环形区段，并将其变形为新数值。	35-donut-chart.md

决策规则

用户要求实现过渡效果时，先根据可见的 UI 元素进行匹配，再根据动词判断：

• 触发器 + 浮在上方的小圆点 → 通知徽标。
• 从触发器处展开的表面 → 下拉菜单（锚定于触发器，并感知展开原点）或模态框（居中显示，无锚点）。
• 滑入页面某个区域的表面 → 面板展开。
• 两个屏幕、列表 ↔ 详情或步骤 1 ↔ 步骤 2 → 页面并排。
• 元素的宽度或高度发生变化 → 卡片调整大小。
• 标签在原处改变，且新旧文本开头或结尾有相同字母（Copy code 变为 Copied，Follow 变为 Following）→ 文本变形。
• 元素的文本内容在原处改变，且新旧文本没有共同内容（Processing 变为 Done）→ 文本状态切换。
• 视图背后的数据变化，导致数值在原处更新（图表的时间段、货币、单位）→ 对每个发生变化的数值使用柔和文本切换。
• 圆环图 → 圆环图（间隙均匀、圆角半径最小，数据变化时会变形）。
• 同一位置的两个图标 → 图标切换。
• 数值更新 → 数字弹入。
• 确认 / 成功 / “完成”时刻（勾号、付款已处理、文件已上传）→ 成功勾号。
• 悬停在水平排列的项目上（头像、标签、分段按钮、标签胶囊）→ 头像组悬停。
• 表单验证错误 / “此处有误”反馈（无效字段、错误 PIN、重复名称）→ 错误状态抖动。
• 清空文本字段（搜索框 × 按钮、重置筛选条件）→ 输入内容淡出清除。
• 先显示占位内容，加载后再替换为实际内容（列表行、卡片、个人资料标题）→ 骨架屏加载并显示内容。
• 进行中 / 需要显得鲜活的“思考中”文本（加载标签、流式传输状态）→ 闪烁文本。
• 一组数量较少、水平排列且互斥的选项，带有移动的高亮效果（视图切换器、分段控件、筛选标签页）→ 标签页滑动。
• 悬停 / 聚焦触发器时显示的提示（图标工具提示、信息气泡）→ 工具提示打开 / 关闭。
• 主标题 + 补充说明以有节奏的方式依次进入（主视觉文案、空状态、引导步骤）→ 文本依次显现。
• 卡片 / 磁贴在悬停时应随指针呈现 3D 动态效果（产品卡片、封面图、会员卡，可带或不带高光眩光）→ 卡片悬停倾斜。
• 圆形触发器变为其打开的表面（+ FAB 扩展为菜单 / 面板、撰写按钮展开）→ 加号 → 菜单变形。如果表面是独立弹出层，只是从触发器处展开，则改用下拉菜单。
• 带有可折叠主体，且主体高度可增减的标题区域（设置分组、FAQ、筛选区域、“显示更多”、折叠内容）→ 手风琴展开。
• 没有明确匹配项 → 使用 transitions reveal 作为后备方案，让用户自行选择。不要猜测。

如果有两种过渡效果都适用，优先选择开销较低的方案（卡片调整大小优于面板展开，下拉菜单优于模态框，成功勾号优于完整的模态框庆祝效果），除非设计明显需要更复杂的表面。成功勾号仅为动画效果——如果还需要将微调器替换为勾号，请搭配 图标切换。

命令

该技能除了直接的过渡效果请求外，还提供四个带命名空间的动词，Agent 应能识别。每条命令都以 transitions 开头，因此调用时不会与同一项目中安装的其他技能的动词冲突。

transitions reveal — 列出所有过渡效果

触发短语： transitions reveal、“显示过渡效果”、“列出所有过渡效果”、“此技能中有哪些过渡效果”、“显示过渡效果目录”。

行为： 将 32 种过渡效果打印为带编号的纯文本列表，包含名称、单行摘要和匹配的参考文件名。复用上文 ## Quick reference 中的条目；不要编写新的描述。无需访问项目。

transitions review — 审查项目是否适用

触发短语： transitions review、“review my project”、“audit my animations”、“where would transitions.dev help”、“find places to use this skill”。

行为：

1. 在工作区中搜索以下指示：transition: 声明、@keyframes、样式文件中硬编码的 ms / s 时长，以及符合决策规则模式的组件（模态框、下拉菜单、徽章、搜索输入框、骨架屏、标签页、工具提示等）。
2. 对每个命中项，按照决策规则进行匹配，并选出最适合的一个过渡效果。
3. 按文件分组，输出编号列表：
   • path/to/Component.tsx:L42 — 看起来像是下拉菜单打开，建议使用 menu-dropdown（05-menu-dropdown.md）。
   • 跳过已使用 t-* 类的临时过渡效果。
4. 不要编辑任何内容。最后加上：“运行 transitions apply，即可在任意一行安装建议的过渡效果。”

transitions apply — 安装最适合的过渡效果

触发短语： transitions apply、“apply a transition here”、“add the right transition”、“install transitions-dev here”、“fix the animation on this element”。

行为：

1. 读取上下文：当前打开的文件、光标附近的元素、周围的 CSS / JSX。如果用户明确指定了过渡效果（例如 transitions apply menu-dropdown），则使用该效果。
2. 根据此上下文执行 ## Decision rules 中的决策规则，并选出一个过渡效果。如果有两个都适用，则优先选择开销较低的那个（与现有规则使用相同的平局处理方式）。
3. 用一句话提出建议：“我会在这里应用 menu-dropdown，因为该元素由触发器打开且有锚定位置。确认安装吗？”。
4. 确认后，逐字遵循 ## Output format 中现有的五步流程（根区块、代码片段、钩子、减少动态效果的保护条件、必要时的 JS 编排）。
5. 如果 Agent 无法有把握地选出单个过渡效果，则回退到 transitions reveal，并请用户选择。

transitions refine — 用动态效果令牌替换临时动态效果

触发短语： transitions refine、“refine my transitions”、“scan for ad-hoc transitions”、“replace hardcoded durations with motion tokens”、“tokenize my animations”、“tune the durations / easing”、“audit my custom keyframes”、“make the timing consistent”、“align to the motion tokens”。

行为：

1. 扫描整个项目（不仅是专用样式表，还包括内联 style= / CSS-in-JS、styled-components、<style> 区块、Tailwind 任意值，如 duration-[300ms]），查找临时动态效果：transition / animation 简写和长属性、自定义 @keyframes 区块、硬编码时长（…ms / …s）、缓动（cubic-bezier(...) 或关键字）、位移距离（px）、scale(...) 和 blur(...)。
2. 根据周围的选择器 / 组件以及 ## Decision rules，推断每个值对应的动态效果用途（模态框关闭、下拉菜单打开、工具提示、徽章出现、文本显现、页面滑动、抖动等）。对于 @keyframes 区块，读取驱动它的 animation，并判断关键帧自身的时长 / 缓动。
3. 关键决策点在于用途，而非原始数值。 在 ## Motion tokens 中查找推断出的用途，并建议文档中用途相符的令牌——只有用途匹配时才建议替换。300ms 的模态框关闭对应 --duration-quick，因为两者都是“模态框关闭”，即使数值不同。如果某个值的用途与任何令牌都不匹配，则将其列为 no matching token usage 并保持不变——绝不要只因为数值接近就强行替换。
4. 按文件分组，输出编号列表，仅显示应更改的值，每项格式为 path/to/Component.css:L42 — modal close: 300ms → var(--duration-quick) (150ms)、ease → var(--ease-smooth-out)。对于由关键帧驱动的动态效果，建议使用驱动 animation 的时长 / 缓动令牌。
5. 不要编辑任何内容。最后加上：“确认任意一行即可应用更改，或运行 transitions apply 来安装完整的过渡效果。”

动效令牌

支撑这三十二种过渡效果的共享动效刻度——也是 transitions.dev 的 Motion tokens 标签页所展示的同一组令牌。它们位于 _root.css 顶部；导入后，你可以用 var(--…) 引用其中任意令牌（例如：transition: transform var(--duration-fast) var(--ease-smooth-out)）。

transitions refine 会将每个现有值映射到下方的一种用途，然后建议引用相应令牌。请根据用途匹配，而不是根据原始数值——300ms 的模态框关闭仍映射到 --duration-quick（150ms）。

时长

令牌	值	用途
--duration-stagger	40ms	每项的错开偏移
--duration-micro	80ms	工具提示／路径延迟、抖动片段、大幅错开
--duration-quick	150ms	模态框／下拉菜单关闭、文本切换、工具提示出现
--duration-fast	250ms	图标切换、下拉菜单／模态框打开、标签页滑动、页面滑动
--duration-medium	350ms	面板关闭、Toast 关闭
--duration-slow	400ms	面板打开、骨架屏内容显现、输入内容清除
--duration-very-slow	500ms	强调效果、徽章出现、文本显现、成功勾选

缓动函数

令牌	值	用途
--ease-smooth-out	cubic-bezier(0.22, 1, 0.36, 1)	模态框／下拉菜单／面板打开与关闭、页面滑动、调整大小、位置变化
--ease-in-out	ease-in-out	图标切换、文本切换、文本显现、骨架屏显现
--ease-out	ease-out	工具提示打开／关闭
--ease-linear	linear	闪烁、骨架屏脉动、加载指示器
--ease-bounce	cubic-bezier(0.34, 1.36, 0.64, 1)	徽章弹出打开
--ease-bounce-strong	cubic-bezier(0.34, 3.85, 0.64, 1)	弹性悬停移出（头像返回）

距离

令牌	值	用途
--distance-micro	4px	文本切换
--distance-small	6px	错误抖动（小幅片段）
--distance-base	8px	徽章斜向显现、页面滑动、错误抖动（大幅片段）
--distance-medium	12px	文本显现
--distance-large	30px	勾选徽章出现

缩放

令牌	值	用途
--scale-large	0.96	模态框打开／关闭
--scale-medium	0.97	下拉菜单打开
--scale-small	0.98	工具提示打开
--scale-tiny	0.99	下拉菜单关闭

模糊

令牌	值	用途
--blur-small	2px	面板显现、图标切换、文本切换、骨架屏显现、数字弹入
--blur-medium	3px	页面滑动、文本显现
--blur-large	8px	成功勾选打开

通用安装

将 _root.css 一次性复制到你的项目中并导入（或将其 :root 代码块粘贴到全局样式表中）。文件开头是共享的动效令牌刻度（--duration-*、--ease-*、--distance-*、--scale-*、--blur-*——参见 ## Motion tokens），随后是适用于全部三十二种过渡效果的语义化可调变量。每个代码片段都从这些名称中读取变量——--resize-*、--badge-*、--dropdown-*、--clear-*、--shimmer-*、--tabs-*、--tt-*、--stagger-*、--tilt-*、--morph-*、--acc-* 等。

每个参考文件也会单独列出该代码片段所需的变量，因此你可以只安装一种过渡效果，而不必引入整个代码块。不要重复添加代码块——如果已经导入 _root.css，就跳过重新粘贴各代码片段中的 :root。

transitions.dev 在线演示使用的 --pX-* 源令牌不会导出，这是有意为之。可调值已重命名为语义化名称，让用户掌握设计词汇。部分过渡效果（输入内容清除、闪烁文本、标签页、工具提示）包含随主题变化的颜色令牌——每个参考文件都会说明 html[data-theme="dark"] 的覆盖规则。

输出格式

在用户的项目中添加过渡效果时：

1. 将 _root.css 中的变量安装到用户的全局样式表中，但仅在其中尚未包含这些变量时执行；如果只安装单个过渡效果，则仅添加参考文件中的对应 :root 代码块。如果通用代码块已导入，不要重复添加。
2. 从相关参考文件中原样粘贴所选过渡效果的 CSS。不要重写选择器，不要将过渡效果合并为简写，也不要删除 will-change。这些代码片段均经过调整和测试。
3. 接入文档中说明的 HTML 挂钩——类名（.t-dropdown、.t-modal、.t-success-check、.t-avatar、.t-clear、.t-skel、.t-shimmer、.t-tabs、.t-tt、.t-stagger、.t-tilt、.t-morph、.t-acc，……）和状态属性（data-open、data-state、data-page、data-origin、aria-selected、aria-expanded、.is-open、.is-closing、.is-error、.is-shaking、.has-value、.is-clearing、.is-pulsing、.is-revealed、.is-shown、.is-hiding、.is-hover、.is-tilting）。
4. 保留 @media (prefers-reduced-motion: reduce) 代码块。每个代码片段都包含该代码块。删除它会导致组件无法通过无障碍审查。
5. 对于需要 JS 的过渡效果（下拉菜单、模态框、文本切换、数字弹入、页面滑动、成功勾选、头像组悬停、错误状态抖动、输入框清除、骨架屏显示、标签页滑动、工具提示、文本显示、卡片悬停倾斜、加号 → 菜单变形、手风琴展开），请从参考文件中复制对应的小型编排代码片段，并根据用户的 DOM 调整选择器。保留读取计时的代码（getComputedStyle(...)getPropertyValue("--…")），确保时长与 :root 中的值保持同步。Shimmer 文本是纯 CSS，无需 JS。

尽量缩小差异：只编辑引入过渡效果所需的文件。不要重命名用户现有的变量，不要重新格式化无关 CSS，也不要引入动画库。

应避免的常见错误

• 移除下拉菜单／模态框的关闭状态类清理逻辑：如果没有通过 setTimeout 移除 .is-closing，下次打开时会从关闭状态的缩放比例跳变，而不是从静止的打开前缩放比例开始。
• 忘记在文本切换、数字弹入、成功勾选重播和错误状态抖动中触发重排：在移除并重新添加类／属性之间执行 void el.offsetWidth（或 offsetHeight），才能确保动画重播。
• 给单个容器添加动画，而不是给内部元素添加动画：徽章动画应作用于圆点，而不是触发器；页面滑动动画应作用于页面各区块，而不是容器。
• 将 transition: … 替换为 transition: all：每个代码片段都特意列出了确切的属性，以避免不相关的样式变化也被一并过渡。
• 将成功勾选的 stroke-dasharray 写死：代码片段使用 20 作为占位值。请将其替换为 path.getTotalLength() 的结果向上取整后再加 1，并根据你自己的路径计算；否则描边会提前显示或绘制过头。
• 在 CSS 中为头像组悬停设置 transition-timing-function：必须在 JS 中内联设置，并且要先于写入 --shift／--scale-active，这样弹性缓动效果才只会在 mouseleave 时生效。
• 在错误状态抖动中将 .is-error 和 .is-shaking 合并为一个类：让两者各自独立，才能在不闪烁整个错误样式的情况下重播抖动（移除 → 重排 → 重新添加）。
• 在深色模式下让输入框清除按钮的光晕继续使用 mix-blend-mode: multiply：应切换为 screen，将 --glow-opacity 提高至约 0.85，并在 JS 中绘制白色渐变。
• 忘记在无过渡的情况下设置标签页滑块的初始位置：首次绘制和调整大小时，应将 transition: none 与 transform、width 一起设置（然后触发重排并恢复过渡）；否则滑块会从 translateX(0)／width: 0 动画进入。
• 在倾斜元素本身上跟踪指针：卡片悬停倾斜时，应将 pointermove 绑定到扁平的外层 .t-tilt 包装器，而不是 .t-tilt-card，否则旋转的边缘会移到光标下方，导致悬停效果闪烁。
• 在手风琴网格轨道上设置内边距：应将内边距加到 .t-acc-panel-inner 上，绝不要加到 .t-acc-panel 上；在 0fr 轨道上设置内边距会留下残余高度条，导致面板无法完全关闭。
• 变形手风琴箭头的 d 路径：CSS d: 路径插值仅适用于 Chromium，因此在移动版 Safari／Firefox 中不会播放动画。改为垂直翻转箭头（transform: scaleY(-1)）即可——它会像路径变形一样在中点经过一条水平线，并且兼容所有浏览器。保持路径关于其 viewBox 中心对称，并添加 vector-effect: non-scaling-stroke，确保描边在翻转过程中保持恒定。这就是代码片段采用的做法。

参考文件

• 01-card-resize.md — 卡片缩放
• 02-number-pop-in.md — 数字弹入
• 03-notification-badge.md — 通知徽章
• 04-text-states-swap.md — 文本状态切换
• 05-menu-dropdown.md — 下拉菜单
• 06-modal.md — 模态框打开 / 关闭
• 07-panel-reveal.md — 面板显现
• 08-page-side-by-side.md — 页面并排
• 09-icon-swap.md — 图标切换
• 10-success-check.md — 成功勾选
• 11-avatar-group-hover.md — 悬停头像组
• 12-error-state-shake.md — 错误状态抖动
• 13-input-clear-dissolve.md — 输入框清空并淡出
• 14-skeleton-reveal.md — 骨架屏加载与显现
• 15-shimmer-text.md — 闪烁文本
• 16-tabs-sliding.md — 标签页滑动
• 17-tooltip.md — 工具提示打开/关闭
• 18-texts-reveal.md — 文本显现
• 19-card-tilt.md — 卡片悬停倾斜
• 20-plus-menu-morph.md — 加号变形为菜单
• 21-accordion.md — 手风琴展开
• 22-toast.md — Toast 打开 / 关闭
• 23-like-button.md — 点赞按钮
• 24-learn-more-hover.md — 悬停了解更多
• 25-checkbox-check.md — 复选框勾选
• 26-spinning-counter.md — 旋转计数器
• 27-toggle.md — 切换开关
• 28-thinking-states.md — 思考状态
• 29-reasoning-stream.md — 推理流
• 30-streaming-text.md — 流式文本
• 31-matrix-loader.md — 矩阵点加载器
• 32-banner-stacking.md — 横幅堆叠
• 33-text-morph.md: 文本变形
• 34-text-swap-soft.md: 柔和文本切换
• 35-donut-chart.md: 环形图
• _root.css — 可直接导入的独立通用安装代码块。