transitions-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Transitions.dev

Nine portable CSS transitions, each namespaced under

t-*

selectors with semantic CSS custom properties. Drop-in: paste the snippet, wire the documented HTML hooks, done. No framework dependencies, no demo-specific markup, and every snippet ships a

prefers-reduced-motion

guard.

9种可移植的CSS transitions，每种都以

t-*

选择器为命名空间，并搭配语义化CSS自定义属性。即插即用：粘贴代码片段，对接文档中说明的HTML钩子，即可完成集成。无框架依赖，无演示专用标记，每个代码片段都附带

prefers-reduced-motion

防护机制。

Quick reference

快速参考

Transition	When to use	Reference
Card resize	Tween a container's width or height when its layout state changes.	01-card-resize.md
Number pop-in	Re-enter each digit with a blurred slide when a number updates.	02-number-pop-in.md
Notification badge	Slide a small badge onto a trigger and pop the dot.	03-notification-badge.md
Text states swap	Swap text in place with a blurred up-and-down transition.	04-text-states-swap.md
Menu dropdown	Open an origin-aware dropdown that grows from its trigger.	05-menu-dropdown.md
Modal open / close	Scale-up modal dialog with a softer scale-down on close.	06-modal.md
Panel reveal	Slide a panel into a region with a cross-blur.	07-panel-reveal.md
Page side-by-side	Slide between two side-by-side pages (list ↔ detail, step 1 ↔ step 2).	08-page-side-by-side.md
Icon swap	Cross-fade two icons in the same slot with blur and scale.	09-icon-swap.md

过渡效果	使用场景	参考文档
卡片尺寸调整	当容器布局状态变化时，缓动调整其宽度或高度。	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

Decision rules

决策规则

When the user asks for a transition, match against the visible UI element first, then the verb:

Trigger + small dot floating on top → notification badge.
Trigger + surface that grows from it → dropdown (anchored, origin-aware) or modal (centered, no anchor).
Surface that slides into a region of the page → panel reveal.
Two screens, list ↔ detail or step 1 ↔ step 2 → page side-by-side.
Element changes width or height → card resize.
Element's text content changes in place → text states swap.
Two icons in the same slot → icon swap.
A number updates → number pop-in.

If two transitions could fit, prefer the lower-overhead one (card resize over panel reveal, dropdown over modal) unless the design clearly calls for the heavier surface.

当用户请求过渡效果时，优先匹配可见UI元素，再匹配动作动词：

触发器 + 顶部悬浮的小圆点 → 通知徽章。
触发器 + 从其位置展开的界面 → 下拉菜单（锚定、感知原点）或模态框（居中、无锚点）。
滑入页面指定区域的界面 → 面板展开。
两个屏幕，列表 ↔ 详情或步骤1 ↔ 步骤2 → 页面并排切换。
元素宽度或高度变化 → 卡片尺寸调整。
元素文本内容原地变化 → 文本状态切换。
同一位置的两个图标 → 图标切换。
数字更新 → 数字弹出。

如果两种过渡效果都适用，优先选择开销更低的那种（卡片尺寸调整优先于面板展开，下拉菜单优先于模态框），除非设计明确要求更复杂的界面。

Universal install

通用安装

Drop this

:root

block into your project once. Every transition snippet reads from these semantic names — there are no per-component values to chase down later.

css

/* 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;
}

The

--pX-*

source tokens used by the live demo at transitions.dev are intentionally not exported here. Tunable values are renamed to semantic names (

--badge-*

--dropdown-*

--modal-*

, …) so the user owns the design vocabulary.

将以下

:root

代码块一次性添加到你的项目中。所有过渡效果代码片段都会读取这些语义化名称——后续无需逐个组件调整参数。

css

/* 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;
}

transitions.dev在线演示中使用的

--pX-*

源标记并未在此导出。可调整参数已重命名为语义化名称（

--badge-*

、

--dropdown-*

、

--modal-*

等），以便用户掌控设计词汇。

Output format

输出格式

When inserting a transition into the user's project:

Add the
:root
block above to the user's global stylesheet, but only if it isn't already there. If the user already imported the universal install block once, do not duplicate it.
Paste the chosen transition's CSS verbatim from the relevant reference file. Do not rewrite selectors, do not collapse the transition into shorthand, do not strip
```
will-change
```
. The snippets are tuned and tested.

Wire the documented HTML hooks — class names (

.t-dropdown

.t-modal

, …) and state attributes (

data-open

data-state

data-page

.is-open

.is-closing

.is-exit

.is-enter-start

.is-animating

Preserve the
@media (prefers-reduced-motion: reduce)
block. Every snippet ships one. Removing it makes the component fail accessibility audits.
For transitions that need JS (dropdown, modal, text swap, number pop-in, page slide), copy the small orchestration snippet from the reference file and adapt the selectors to the user's DOM. Keep the timing reads (
```
getComputedStyle(...)getPropertyValue("--…")
```
) so durations stay in sync with the
```
:root
```
values.

Keep the diff small: only edit the files needed to introduce the transition. Don't rename the user's existing variables, don't reformat unrelated CSS, don't pull in a motion library.

将过渡效果插入用户项目时：

将上述
:root
代码块添加到用户的全局样式表中，但仅在尚未添加的情况下执行。如果用户已导入过一次通用安装代码块，请勿重复添加。
按原样粘贴所选过渡效果的CSS代码，取自对应的参考文件。不要重写选择器，不要将过渡属性简写，不要移除
```
will-change
```
。这些代码片段均经过调优和测试。
对接文档中说明的HTML钩子——类名（
```
.t-dropdown
```
、
```
.t-modal
```
等）和状态属性（
```
data-open
```
、
```
data-state
```
、
```
data-page
```
、
```
.is-open
```
、
```
.is-closing
```
、
```
.is-exit
```
、
```
.is-enter-start
```
、
```
.is-animating
```
）。
保留
@media (prefers-reduced-motion: reduce)
代码块。每个代码片段都附带该块。移除它会导致组件无法通过无障碍审计。
对于需要JS的过渡效果（下拉菜单、模态框、文本切换、数字弹出、页面滑动），从参考文件中复制小型编排代码片段，并根据用户DOM调整选择器。保留时长读取逻辑（
```
getComputedStyle(...)getPropertyValue("--…")
```
），确保时长与
```
:root
```
中的值保持同步。

尽量减少改动：仅修改引入过渡效果所需的文件。不要重命名用户现有变量，不要格式化无关CSS，不要引入动画库。

Common mistakes to avoid

需避免的常见错误

Stripping the close-state class cleanup on dropdown/modal — without the
```
setTimeout
```
that removes
```
.is-closing
```
, the next open jumps from the closing scale instead of the resting pre-open scale.
Forgetting the reflow in the text swap and number pop-in —
```
void el.offsetHeight
```
between class removal and re-addition is what guarantees the animation replays.
Animating a single container instead of the inner pieces — for the badge, animate the dot, not the trigger; for page slide, animate the page sections, not the container.
Replacing
transition: …
with
transition: all
— every snippet enumerates exact properties on purpose so unrelated style changes don't ride in for free.

移除下拉菜单/模态框的关闭状态类清理逻辑——如果没有移除
```
.is-closing
```
的
```
setTimeout
```
，下次打开时会从关闭时的缩放状态开始，而非初始的预打开缩放状态。
忘记文本切换和数字弹出中的重排操作——在移除和重新添加类之间执行
```
void el.offsetHeight
```
是保证动画能重新播放的关键。
仅为单个容器添加动画——对于徽章，应为圆点添加动画，而非触发器；对于页面滑动，应为页面区块添加动画，而非容器。
用
transition: all
替换
transition: …
——每个代码片段都明确列出了具体属性，目的是避免无关样式变化被意外带入过渡效果。

Reference files

参考文件

01-card-resize.md — Card resize
02-number-pop-in.md — Number pop-in
03-notification-badge.md — Notification badge
04-text-states-swap.md — Text states swap
05-menu-dropdown.md — Menu dropdown
06-modal.md — Modal open / close
07-panel-reveal.md — Panel reveal
08-page-side-by-side.md — Page side-by-side
09-icon-swap.md — Icon swap
_root.css — the universal install block on its own, ready to import directly.

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 — 图标切换
_root.css — 独立的通用安装代码块，可直接导入。",