Transitions.dev 动效令牌 Motion Tokens 完整清单：时长、缓动、距离、缩放、模糊 5 个维度一次讲清
【免费下载链接】transitions.devUI montion AI agent, a library of 43+ crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev
Transitions.dev 是一个开源的 UI 动效转场库（43+ 套精心打磨的 CSS 转场），它内置了一套动效令牌（Motion Tokens）系统：用 5 个维度——时长、缓动、距离、缩放、模糊——把"动画该怎么动"变成一张可查的速查表。本文带你完整读懂这套动效令牌：每个令牌的值是多少、该用在哪个场景，以及为什么"按用途匹配，而不是按最接近的数字匹配"。
为什么需要动效令牌？
写动画时最常见的痛点：250ms还是260ms？ease-out还是手写的cubic-bezier(...)？每处都随手写一个值，项目一多，动效节奏就会"各说各话"。
Transitions.dev 的做法是给每个动效维度建立共享刻度尺（shared scale）：把时长、缓动、距离、缩放、模糊各定义成一组语义化 CSS 变量，所有转场片段都从这组变量取值。你只需要在:root里导入一次，就能用var(--…)引用任意令牌。
这套令牌的源头文件是_root.css，令牌表格完整收录在skills/transitions-dev/SKILL.md的 "Motion tokens" 一节。
💡 核心原则：一个值"错"不是因为它差 20ms，而是因为它不符合这个动效的用途。先判断动效在做什么（弹窗关闭？下拉展开？徽标出现？），再挑用途匹配的令牌。
维度一：时长（Durations）—— 动画走多久
时长是动效的心跳。Transitions.dev 定义了 7 档时长，从 40ms 到 500ms：
| 令牌 | 值 | 典型用途 |
|---|---|---|
--duration-stagger | 40ms | 逐项交错（stagger）的单项偏移 |
--duration-micro | 80ms | tooltip 延迟、抖动单段、大间距交错 |
--duration-quick | 150ms | 弹窗/下拉关闭、文字切换、tooltip 出现 |
--duration-fast | 250ms | 图标切换、弹窗/下拉打开、标签滑动、页面滑动 |
--duration-medium | 350ms | 面板关闭、toast 关闭 |
--duration-slow | 400ms | 面板打开、骨架屏内容揭示、输入清空 |
--duration-very-slow | 500ms | 强调时刻：徽标出现、文字揭示、成功对勾 |
记忆技巧：关闭要比打开快。下拉/弹窗"开 250ms → 关 150ms"，面板"开 400ms → 关 350ms"——打开是邀请，关闭要赶紧让路。
维度二：缓动（Easings）—— 动画怎么加速减速
缓动决定"手感"。6 个缓动令牌各有明确分工：
| 令牌 | 值 | 典型用途 |
|---|---|---|
--ease-smooth-out | cubic-bezier(0.22, 1, 0.36, 1) | 默认值：弹窗/下拉/面板开合、页面滑动、尺寸变化 |
--ease-in-out | ease-in-out | 图标切换、文字切换、文字揭示、骨架屏揭示 |
--ease-out | ease-out | tooltip 开/关 |
--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) | 强烈的弹性回弹（头像组悬停归位） |
两条实用规则：
- 手写的通用
ease、ease-in或随意的cubic-bezier(...)，如果是界面级运动（开合、滑动、缩放），一律推向默认--ease-smooth-out。 - 弹跳只用于入场——徽标弹出、数字跳入可以弹；关闭动画永远不要弹，"关门"不该有回弹。
维度三：距离（Distances）—— 元素移动多远
位移距离随"频率"递减、随"仪式感"递增：高频的小交互几乎不动，一次性的庆祝动效可以走远一点。
| 令牌 | 值 | 典型用途 |
|---|---|---|
--distance-micro | 4px | 文字原位切换 |
--distance-small | 6px | 错误抖动（小段） |
--distance-base | 8px | 徽标对角揭示、页面滑动、错误抖动（大段） |
--distance-medium | 12px | 文字揭示（上浮） |
--distance-large | 30px | 成功对勾徽标出现 |
⚠️ 经验阈值：非整屏面板/抽屉的位移若超过~40px，通常会显得迟钝，应往--distance-base（8px）收。
维度四：缩放（Scales）—— 元素从多大开始变
缩放令牌记录的是起始缩放（动画从该值出发，最终总是落回1）。面越大，起步越"远"；小提示则几乎不缩：
| 令牌 | 值 | 典型用途 |
|---|---|---|
--scale-large | 0.96 | 弹窗打开 / 关闭 |
--scale-medium | 0.97 | 下拉菜单打开 |
--scale-small | 0.98 | tooltip 打开 |
--scale-tiny | 0.99 | 下拉菜单关闭 |
注意一个细节：下拉"关闭"用的是0.99（Tiny）而不是0.97——退出阶段要轻，别把内容甩出屏幕。若起始缩放低于~0.9，看起来更像"变焦镜头"，不适合 UI 控件，应吸附到用途令牌。
维度五：模糊（Blur）—— 起点糊多少
模糊令牌记录的是起始模糊（从该值消散到0），用来柔化切换和滑动，而不是用于纯淡入淡出或主题换色：
| 令牌 | 值 | 典型用途 |
|---|---|---|
--blur-small | 2px | 面板揭示、图标切换、文字切换、骨架屏揭示、数字跳入 |
--blur-medium | 3px | 页面滑动、文字揭示 |
--blur-large | 8px | 成功对勾展开 |
模糊可以"缺失"也可以"偏离令牌"：如果一个页面滑动场景根本没有模糊通道，Refine 工具会主动建议补上--blur-medium，而不是只改数字。
如何把令牌用到自己项目里
- 导入一次令牌表。把
_root.css（transitions-polish 技能自带，纯令牌、零依赖）拷入项目全局样式，即可随处var(--duration-fast)。 - 按用途匹配。完整规则见
skills/transitions-polish/SKILL.md：扫描整个项目的时长、缓动、位移、缩放、模糊值，先推断用途，再挑令牌；用途对不上任何令牌的，保持原样，绝不硬换。 - 用工具自动审计。Refine 面板的确定性引擎
refine/server/motion-tokens.mjs把同样的五维令牌表实现成了最近邻 + 用途优先的匹配逻辑，transitions review/transitions polish命令会自动把300ms的弹窗关闭建议改成var(--duration-quick)（150ms）这类提案。 - 记住高阶规则（
_refine-rules.md）：开/关不对称、hover 进快出弹、stagger 总量控制在 ~300ms 内、关闭和 hover-out 永远不加延迟。
一张表总结：5 个维度速查
| 维度 | 令牌数量 | 取值范围 | 落点 |
|---|---|---|---|
| 时长 Duration | 7 | 40ms – 500ms | 用途 → 档位 |
| 缓动 Easing | 6 | smooth-out 为默认 | 弹跳只入场 |
| 距离 Distance | 5 | 4px – 30px | 落点 0 |
| 缩放 Scale | 4 | 0.96 – 0.99 | 落点 1 |
| 模糊 Blur | 3 | 2px – 8px | 落点 0 |
掌握这 5 个维度、25 个令牌，你的项目里每一个动效都将落在同一把刻度尺上——这正是 Transitions.dev "motion tokens" 的完整清单。
【免费下载链接】transitions.devUI montion AI agent, a library of 43+ crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
