transitions-dev

Transitions.dev

十二种可移植的 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
错误状态抖动	各段分别通过 cubic-bezier 曲线抖动，并自动恢复边框和消息。	12-error-state-shake.md

选择规则

用户提出转场需求时，先根据可见的 UI 元素匹配，再看动作：

• 触发器 + 浮在上方的小圆点 → 通知徽标。
• 从触发器展开的表面 → 下拉菜单（锚定触发器、根据原点展开）或模态框（居中、无锚点）。
• 滑入页面某个区域的表面 → 面板显现。
• 两个界面，列表 ↔ 详情或步骤 1 ↔ 步骤 2 → 页面并排切换。
• 元素的宽度或高度发生变化 → 卡片尺寸变化。
• 元素的文本内容在原位变化 → 文本状态切换。
• 同一位置的两个图标 → 图标切换。
• 数字更新 → 数字弹入。
• 确认 / 成功 / “完成”时刻（勾选标记、付款已处理、文件已上传）→ 成功勾选。
• 悬停在水平排列的一组项目上（头像、标签、分段按钮、标签胶囊）→ 头像组悬停。
• 表单验证错误 / “内容有误”反馈（无效字段、PIN 错误、名称重复）→ 错误状态抖动。

如果两种转场都适用，优先选择开销较小的一种（卡片尺寸变化优于面板显现，下拉菜单优于模态框，成功勾选优于完整的模态框庆祝效果），除非设计明确需要更重的表面。成功勾选仅包含动画；如果还需要将加载旋转图标切换为勾选标记，请搭配图标切换。

通用安装

将此 :root 代码块添加到项目中，只需一次。每个转场代码片段都会读取这些语义化名称，无需之后再逐个查找组件级别的值。

/* transitions-dev — copy this :root block into your project once.
   Every transition snippet reads from these semantic names. */
:root {
  /* Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text states swap */
  --text-swap-dur: 200ms;
  --text-swap-translate-y: 8px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-out;
  /* Menu dropdown */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side */
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success check */
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}

实时演示 transitions.dev 使用的 --pX-* 源令牌有意不在此处导出。可调节的值会重命名为语义化名称（--badge-*、--dropdown-*、--modal-* 等），让用户掌握设计词汇。

输出格式

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

1. 将上方的 :root 块添加到用户的全局样式表中，但仅限该块尚不存在的情况。如果用户已导入过一次通用安装块，请勿重复添加。
2. 从相应的参考文件中原样粘贴所选过渡效果的 CSS。不要重写选择器，不要将过渡效果合并为简写，也不要移除 will-change。这些代码片段都经过调整和测试。
3. 接入文档中说明的 HTML 钩子——类名（.t-dropdown、.t-modal、.t-success-check、.t-avatar、.t-input 等）和状态属性（data-open、data-state、data-page、.is-open、.is-closing、.is-exit、.is-enter-start、.is-animating、.is-error、.is-shaking）。
4. **保留 @media (prefers-reduced-motion: reduce) 块。**每个代码片段都包含该块。移除它会导致组件无法通过无障碍审查。
5. 对于需要 JS 的过渡效果（下拉菜单、模态框、文本切换、数字弹入、页面滑动、成功勾选、头像组悬停、错误状态抖动），请从参考文件中复制相应的小段编排代码，并根据用户的 DOM 调整选择器。保留计时读取（getComputedStyle(...)getPropertyValue("--…")），确保时长与 :root 中的值保持同步。

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

应避免的常见错误

• 移除下拉菜单/模态框的关闭状态类清理逻辑——如果没有用于移除 .is-closing 的 setTimeout，下次打开时会从关闭时的缩放状态跳转，而不是从打开前的静止状态开始。
• 忘记文本切换、数字弹入、成功勾选重播和错误状态抖动中的重排——在移除并重新添加类/属性之间执行 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 合并为一个类用于错误状态抖动——保持两者相互独立，才能在不让整个错误样式闪烁的情况下重播抖动（移除 → 重排 → 重新添加）。

参考文件

• 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 — 错误状态抖动
• _root.css — 独立的通用安装块，可直接导入。