transitions-polish

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Transitions Polish

过渡效果打磨

An add-on to the

transitions-dev

skill. Where

transitions-dev

installs whole transitions, this skill polishes motion that already exists: it scans the five motion-token dimensions — duration, distance, scale, blur, easing — and suggests the token each value should reference, plus the higher-order rules for when a value is right (open/close asymmetry, hover in/out, stagger, delay).

Install it alongside

transitions-dev

, or on its own — the token values are restated below so this skill can audit a project standalone. When it is installed, the transitions.dev Refine panel automatically feeds these rules into every Small refinement job.

这是

transitions-dev

技能的附加组件。

transitions-dev

用于完整安装过渡效果，而本技能则专注于打磨已有的动画效果：它会扫描运动令牌的五个维度——时长、距离、缩放、模糊、缓动——并建议每个值应引用的令牌，以及判断某个值是否合适的高阶规则（开/关动画不对称性、悬停移入/移出、交错效果、延迟）。

你可以将它与

transitions-dev

一同安装，也可以单独安装——下文会重新列出令牌值，因此本技能可独立审核项目。安装后，transitions.dev的Refine面板会自动将这些规则应用到每一项小优化任务中。

Core doctrine: match on usage, never on the nearest number

核心原则：基于用途匹配，而非数值接近

A value is not "wrong" because it is off by 20ms. It is wrong when it does not fit what the motion does. Always infer the usage first — modal close, dropdown open, tooltip, badge appear, page slide, text reveal, shake — then pick the token whose documented usage matches. A

300ms

modal close maps to

--duration-quick

(150ms) because both are "modal close", even though the numbers differ. If a value's usage matches no token usage, leave it untouched. Never force a swap just because a number is close.

某个数值并非因为差20ms就“错误”，只有当它不符合动画的用途时才是错误的。始终先推断用途——模态框关闭、下拉菜单展开、提示框、徽章出现、页面滑动、文本渐显、抖动——然后选择文档中用途匹配的令牌。例如，300ms的模态框关闭动画应映射到

--duration-quick

（150ms），因为二者都是“模态框关闭”，尽管数值不同。如果某个值的用途与任何令牌的用途都不匹配，则保持原样。绝不能仅仅因为数值接近就强制替换。

The five dimensions

五个维度

Same scale the transitions.dev Motion tokens tab exposes. Copy this skill's

_root.css

into your project once; once imported, reference any token as

var(--…)

. The

transitions-dev

transitions ship literal values, so they work without these tokens — install this skill to tune them against the shared scale.

与transitions.dev运动令牌标签页展示的尺度一致。只需将本技能的

_root.css

复制到项目中一次；导入后，即可通过

var(--…)

引用任意令牌。

transitions-dev

的过渡效果使用字面量值，因此无需这些令牌也能运行——安装本技能可将它们调整为统一的尺度。

Durations

时长

Token	Value	Usage
`--duration-stagger`	`40ms`	per-item stagger offset
`--duration-micro`	`80ms`	tooltip/path delay, shake segment, large stagger
`--duration-quick`	`150ms`	modal/dropdown close, text swap, tooltip appear
`--duration-fast`	`250ms`	icon swap, dropdown/modal open, tabs sliding, page slide
`--duration-medium`	`350ms`	panel close, toast close
`--duration-slow`	`400ms`	panel open, skeleton content reveal, input clear
`--duration-very-slow`	`500ms`	emphasis moments, badge appear, text reveal, success check

令牌	数值	用途
`--duration-stagger`	`40ms`	逐项交错偏移
`--duration-micro`	`80ms`	提示框/路径延迟、抖动片段、大尺寸交错
`--duration-quick`	`150ms`	模态框/下拉菜单关闭、文本切换、提示框显示
`--duration-fast`	`250ms`	图标切换、下拉菜单/模态框展开、标签页滑动、页面滑动
`--duration-medium`	`350ms`	面板关闭、通知框关闭
`--duration-slow`	`400ms`	面板展开、骨架屏内容渐显、输入框清空
`--duration-very-slow`	`500ms`	强调时刻、徽章出现、文本渐显、成功校验

Easings

缓动效果

Token	Value	Usage
`--ease-smooth-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	modal/dropdown/panel open + close, page slide, resize, position change
`--ease-in-out`	`ease-in-out`	icon swap, text swap, text reveal, skeleton reveal
`--ease-out`	`ease-out`	tooltip open / close
`--ease-linear`	`linear`	shimmer, skeleton pulse, spinner
`--ease-bounce`	`cubic-bezier(0.34, 1.36, 0.64, 1)`	badge pop open
`--ease-bounce-strong`	`cubic-bezier(0.34, 3.85, 0.64, 1)`	bouncy hover-out (avatar return)

--ease-smooth-out

is the default. Nudge generic

ease

ease-in

, or any hand-rolled

cubic-bezier(...)

linear(...)

toward it only for surface motion (open/close, slide, resize, position). Leave the other five token easings alone — they are already on-grid and each carries its own intent.

令牌	数值	用途
`--ease-smooth-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	模态框/下拉菜单/面板的展开+关闭、页面滑动、尺寸调整、位置变化
`--ease-in-out`	`ease-in-out`	图标切换、文本切换、文本渐显、骨架屏渐显
`--ease-out`	`ease-out`	提示框展开/关闭
`--ease-linear`	`linear`	闪光效果、骨架屏脉动、加载 spinner
`--ease-bounce`	`cubic-bezier(0.34, 1.36, 0.64, 1)`	徽章弹出展开
`--ease-bounce-strong`	`cubic-bezier(0.34, 3.85, 0.64, 1)`	弹性悬停移出（头像复位）

--ease-smooth-out

是默认值。仅针对表层动画（展开/关闭、滑动、尺寸调整、位置变化），将通用的

ease

、

ease-in

或自定义的

cubic-bezier(...)

linear(...)

调整为该值。其余五个令牌的缓动效果无需改动——它们已符合规范，且各自承载特定意图。

Distances

距离

Token	Value	Usage
`--distance-micro`	`4px`	text swap
`--distance-small`	`6px`	error shake (small segment)
`--distance-base`	`8px`	badge diagonal reveal, page slide, error shake (large segment)
`--distance-medium`	`12px`	text reveal
`--distance-large`	`30px`	check badge appear

Travel distance scales down with frequency and up with ceremony: an in-place text swap barely moves (

4px

), a page slide travels a readable

8px

, a one-off celebratory badge can sweep

30px

. If a translate distance is larger than

~40px

for anything but a full panel/drawer, it usually reads as sluggish — pull it toward

--distance-base

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

移动距离随频率降低而增大，随仪式感增强而增大：原地文本切换几乎不移动（4px），页面滑动移动8px（便于感知），一次性的庆祝徽章可移动30px。如果除完整面板/抽屉外的任何元素的平移距离大于约40px，通常会显得迟缓——应将其调整为

--distance-base

。

Scales

缩放

Token	Value	Usage
`--scale-large`	`0.96`	modal open / close
`--scale-medium`	`0.97`	dropdown open
`--scale-small`	`0.98`	tooltip open
`--scale-tiny`	`0.99`	dropdown close

The captured value is the non-resting "pre" scale the surface animates from; it always settles to

. Bigger surfaces start from further away (

0.96

modal), small hints barely scale (

0.98

–

0.99

). A pre-scale below

~0.9

reads as a "zoom" and rarely fits UI chrome — snap it to the usage token.

令牌	数值	用途
`--scale-large`	`0.96`	模态框展开/关闭
`--scale-medium`	`0.97`	下拉菜单展开
`--scale-small`	`0.98`	提示框展开
`--scale-tiny`	`0.99`	下拉菜单关闭

捕获的数值是元素动画起始的非静止“初始”缩放值，最终会恢复为1。尺寸越大的元素起始缩放值越小（模态框为0.96），小型提示元素几乎不缩放（0.98–0.99）。初始缩放值低于约0.9会呈现“缩放”效果，很少适用于UI组件——应将其对齐到对应用途的令牌。

Blur

模糊

Token	Value	Usage
`--blur-small`	`2px`	panel reveal, icon swap, text swap, skeleton reveal, number pop-in
`--blur-medium`	`3px`	page slide, text reveal
`--blur-large`	`8px`	success check open

Blur is the non-resting "pre" blur, settling to

. Use it to soften a swap or slide, never on a plain fade or a color/theme change. Blur can be absent as well as off-token: when the usage clearly calls for one (a page slide with no blur lane) suggest adding

--blur-medium

令牌	数值	用途
`--blur-small`	`2px`	面板渐显、图标切换、文本切换、骨架屏渐显、数字弹出
`--blur-medium`	`3px`	页面滑动、文本渐显
`--blur-large`	`8px`	成功校验展开

模糊值是动画起始的非静止“初始”模糊值，最终会恢复为0。用于柔化切换或滑动效果，切勿用于纯淡入淡出或颜色/主题变化。模糊效果也可能存在缺失的情况：当用途明确需要模糊（如无模糊通道的页面滑动），建议添加

--blur-medium

。

Polish rules — when a value is right

打磨规则——判断数值是否合适

Open/close asymmetry

开/关动画不对称性

Opening is an invitation; closing should get out of the way. Closes are faster and quieter than opens.

Duration: dropdown/modal open 250ms → close 150ms (
```
--duration-fast
```
→
```
--duration-quick
```
); panel open 400ms → close 350ms (
```
--duration-slow
```
→
```
--duration-medium
```
); toast close 350ms (
```
--duration-medium
```
).
Symmetric exceptions — same duration + easing both ways, do NOT split: page side-by-side (250ms), tabs sliding (250ms), accordion (250ms), icon swap (250ms), text swap (150ms). These read as a single reversible motion, not an open/close pair.
Distance & blur: the enter phase carries the distance and blur; the exit can drop or shrink them so a close doesn't fling content across the screen.
Easing: most opens and closes share
```
--ease-smooth-out
```
. Overshoot curves belong to entrances only (badge pop, number pop-in) — never bounce a close.

展开是一种邀请；关闭应快速离场。关闭动画比展开更快、更简洁。

时长：下拉菜单/模态框展开250ms → 关闭150ms（
```
--duration-fast
```
→
```
--duration-quick
```
）；面板展开400ms → 关闭350ms（
```
--duration-slow
```
→
```
--duration-medium
```
）；通知框关闭350ms（
```
--duration-medium
```
）。
对称例外情况——双向时长+缓动一致，请勿拆分：页面并排切换（250ms）、标签页滑动（250ms）、折叠面板（250ms）、图标切换（250ms）、文本切换（150ms）。这些属于可逆的单一动画，而非开/关配对动画。
距离与模糊：入场阶段带有距离和模糊效果；离场阶段可减少或移除这些效果，避免关闭时内容大幅移动。
缓动：大多数展开和关闭动画使用
```
--ease-smooth-out
```
。过冲曲线仅适用于入场（徽章弹出、数字弹出）——关闭动画切勿使用弹性效果。

Hover in vs hover out

悬停移入 vs 移出

In: quick and direct — a short
```
--duration-fast
```
-or-less lift with
```
--ease-smooth-out
```
.
Out: softer and springier — the return can take longer and use
```
--ease-bounce-strong
```
(avatar return,
```
cubic-bezier(0.34, 3.85, 0.64, 1)
```
) so the row settles instead of snapping. This is the one place the out is more elaborate than the in.

移入：快速直接——使用
```
--duration-fast
```
或更短时长的抬升动画，搭配
```
--ease-smooth-out
```
。
移出：更柔和、更具弹性——复位动画可更长，并使用
```
--ease-bounce-strong
```
（头像复位，
```
cubic-bezier(0.34, 3.85, 0.64, 1)
```
），使元素平稳复位而非突然弹回。这是唯一一种移出动画比移入动画更复杂的场景。

Stagger and delay

交错与延迟

Stagger offset:
```
--duration-stagger
```
(40ms) per item; step up to
```
--duration-micro
```
(80ms) for a few large items. Keep the total stagger (offset × item count) under ~300ms so the last item doesn't feel late — for long lists, cap the number of staggered items or shrink the offset.
Intent delay: a tooltip waits
```
--duration-micro
```
(80ms) before appearing so a passing cursor doesn't trigger it; the success-check path draw uses the same 80ms beat. A delay is right when you want to filter accidental triggers or sequence two things — not to pad a slow animation.
Delay vs duration: if motion feels late, prefer trimming the duration over adding delay. Reserve delay for stagger, intent gating, and deliberate sequencing.
Never delay a close or a hover-out — dismissal must feel instant.

交错偏移：每项使用
```
--duration-stagger
```
（40ms）；若为少量大尺寸元素，可提升至
```
--duration-micro
```
（80ms）。确保总交错时长（偏移×元素数量）低于约300ms，避免最后一个元素显得滞后——对于长列表，限制交错元素数量或缩小偏移值。
意图延迟：提示框显示前等待
```
--duration-micro
```
（80ms），避免误触；成功校验路径绘制也使用相同的80ms节拍。延迟适用于过滤误触或编排两个元素的顺序，而非为缓慢的动画增加缓冲。
延迟 vs 时长：如果动画显得滞后，优先缩短时长而非增加延迟。延迟仅用于交错、意图验证和刻意编排。
切勿为关闭或悬停移出添加延迟——关闭操作必须感觉即时。

Commands

命令

The skill exposes two namespaced verbs. Every command starts with

transitions

so the invocation never collides with verbs from other skills installed in the same project.

review

reports;

polish

applies.

本技能提供两个命名空间动词。所有命令均以

transitions

开头，避免与项目中安装的其他技能的动词冲突。

review

用于报告；

polish

用于应用修改。

transitions review — audit motion against the tokens

transitions review — 对照令牌审核动画效果

Trigger phrases:

transitions review

, "review my animations", "audit the motion", "scan for ad-hoc transitions", "tokenize my animations", "where are my durations off", "align to the motion tokens", "make the timing consistent".

Behaviour:

Scan the whole project — not just stylesheets, but inline
```
style=
```
/ CSS-in-JS, styled-components,
```
<style>
```
blocks, and Tailwind arbitrary values (
```
duration-[300ms]
```
,
```
[transition-timing-function:...]
```
) — for all five dimensions: durations (
```
…ms
```
/
```
…s
```
), easings (
```
cubic-bezier(...)
```
/ keywords), translate distances (
```
translate*(…px)
```
),
```
scale(...)
```
, and
```
blur(...)
```
. Read
```
@keyframes
```
via the
```
animation
```
that drives them.
For each value, infer what the motion does from the surrounding selectors / component names (modal close, dropdown open, tooltip, badge appear, page slide, text reveal, shake, hover lift, …). Look the usage up in the token tables above and pick the token whose documented usage matches — usage first, never nearest number. Do not suggest whole-transition recipe swaps; that is
```
transitions-dev
```
's
```
transitions apply
```
domain.
Apply the polish rules: check open/close asymmetry, hover in/out, stagger totals, and delays — not just whether a single value is on-grid.
Output a numbered list grouped by file, showing only values that should change:
- ```
path/to/Component.css:L42
```
  —
```
modal close: 300ms → var(--duration-quick) (150ms)
```
  — close should be quicker than the 250ms open.
- ```
path/to/List.css:L20
```
  —
```
stagger: 120ms → var(--duration-stagger) (40ms)
```
  — 8 items × 120ms = 960ms total, last item feels late.
- Skip values whose usage matches no token — list them as
```
no matching token usage
```
  and leave them.
Do not edit anything. End with: "Run
```
transitions polish
```
to apply these changes, or confirm any line to apply individually."

触发短语：

transitions review

、“检查我的动画”、“审核动画效果”、“排查临时过渡效果”、“将动画令牌化”、“我的时长哪里不对”、“对齐运动令牌”、“让时间节奏一致”。

行为：

扫描整个项目——不仅是样式表，还包括内联
```
style=
```
/CSS-in-JS、styled-components、
```
<style>
```
块和Tailwind任意值（
```
duration-[300ms]
```
、
```
[transition-timing-function:...]
```
）——扫描所有五个维度：时长（
```
…ms
```
/
```
…s
```
）、缓动效果（
```
cubic-bezier(...)
```
/关键字）、平移距离（
```
translate*(…px)
```
）、
```
scale(...)
```
和
```
blur(...)
```
。通过驱动动画的
```
animation
```
读取
```
@keyframes
```
。
对于每个值，从周围的选择器/组件名称（模态框关闭、下拉菜单展开、提示框、徽章出现、页面滑动、文本渐显、抖动、悬停抬升等）推断动画的用途。对照上文的令牌表查找匹配的用途，选择对应令牌——优先考虑用途，而非数值接近。请勿建议替换完整的过渡效果方案；这是
```
transitions-dev
```
中
```
transitions apply
```
的职责范围。
应用打磨规则：检查开/关不对称性、悬停移入/移出、总交错时长和延迟——不仅是单个数值是否符合规范。
按文件分组输出编号列表，仅显示需要修改的值：
- ```
path/to/Component.css:L42
```
  —
```
模态框关闭：300ms → var(--duration-quick) (150ms)
```
  — 关闭应比250ms的展开更快。
- ```
path/to/List.css:L20
```
  —
```
交错：120ms → var(--duration-stagger) (40ms)
```
  — 8个元素×120ms=960ms总时长，最后一个元素显得滞后。
- 跳过用途与任何令牌都不匹配的值——标记为“无匹配令牌用途”并保持原样。
不做任何编辑。结尾提示：“执行
```
transitions polish
```
应用这些修改，或确认任意单行以单独应用。”

transitions polish — apply motion-token refinements

transitions polish — 应用运动令牌优化

Trigger phrases:

transitions polish

, "polish my transitions", "refine the motion", "tune the timing / easing", "apply the motion tokens", "fix the stagger", "tokenize my animations".

Behaviour:

If the user has not run
```
transitions review
```
in this session, run the same scan from transitions review first (steps 1–4) to build the change list. If they named a specific file, line, or value, scope the scan to that context.
Surface a short proposal: how many values would change, grouped by file, with one example line. Ask for confirmation before editing.
On confirmation, apply the token changes to the source:
- Replace hardcoded durations/easings/distances/scales/blur with
```
var(--…)
```
  references where the project's
```
_root.css
```
  (this skill's
```
_root.css
```
  ) is already imported; otherwise write the token's literal value and note that importing
```
_root.css
```
  would let future tweaks happen in one place.
- Keep the file's existing unit/format (
```
0.25s
```
  vs
```
250ms
```
  ) unless switching to
```
var(--…)
```
  .
- Touch only the motion values being polished — no reformatting, no unrelated edits.
- Handle plain CSS, CSS Modules, styled-components/emotion, Tailwind utilities/config, inline
```
style
```
  objects, and Motion/Framer variants.
If
```
_root.css
```
is not yet in the project, offer to install it (once) before or alongside the polish pass.
Keep the diff small. End with a one-line summary of files touched.

触发短语：

transitions polish

、“打磨我的过渡效果”、“优化动画运动”、“调整时间/缓动效果”、“应用运动令牌”、“修复交错效果”、“将动画令牌化”。

行为：

如果用户在本次会话中未执行
```
transitions review
```
，则先执行与transitions review相同的扫描步骤（步骤1–4）以生成修改列表。如果用户指定了具体文件、行或值，则将扫描范围限定为该上下文。
展示简短的修改提议：按文件分组显示需要修改的数值数量，并附带一行示例。在编辑前请求确认。
确认后，将令牌修改应用到源代码：
- 若项目已导入
```
_root.css
```
  （本技能的
```
_root.css
```
  ），则将硬编码的时长/缓动/距离/缩放/模糊替换为
```
var(--…)
```
  引用；否则写入令牌的字面量值，并提示导入
```
_root.css
```
  可在一处完成未来的调整。
- 保留文件现有的单位/格式（
```
0.25s
```
  vs
```
250ms
```
  ），除非切换为
```
var(--…)
```
  引用。
- 仅修改正在打磨的动画值——不重新格式化，不修改无关内容。
- 支持纯CSS、CSS Modules、styled-components/emotion、Tailwind工具类/配置、内联
```
style
```
  对象以及Motion/Framer变体。
如果项目中尚未导入
```
_root.css
```
，则在打磨过程之前或期间提供安装选项（仅需一次）。
保持差异最小。结尾显示一行修改文件的摘要。

Relationship to the Refine panel

与Refine面板的关系

When this skill is installed in a project, the transitions.dev Refine panel's Small refinement tab automatically inlines the compact rules in

_refine-rules.md

into its agent prompt, so per-click suggestions honor these rules with zero extra file reads.

transitions review

mirrors that audit at project scale;

transitions polish

writes the accepted tweaks to source.

当本技能安装到项目中时，transitions.dev Refine面板的小优化标签会自动将

_refine-rules.md

中的精简规则内联到其代理提示中，因此每次点击的建议都会遵循这些规则，无需额外读取文件。

transitions review

会在项目层面镜像该审核；

transitions polish

会将已接受的修改写入源代码。

Future expansion

未来扩展

Natural next additions to this skill: performance hygiene (

transition: all

, animating

width

top

box-shadow

instead of

transform

opacity

will-change

misuse), missing

prefers-reduced-motion

detection, a cross-project consistency audit (same-purpose transitions using different values), Tailwind/Framer token adapters, and a "motion polish score" report.

本技能的自然扩展方向包括：性能优化（

transition: all

、使用

width

top

box-shadow

而非

transform

opacity

动画、

will-change

误用）、缺失

prefers-reduced-motion

检测、跨项目一致性审核（相同用途的过渡效果使用不同值）、Tailwind/Framer令牌适配器，以及“动画打磨评分”报告。