FOUNDATIONS · MOTION & LAYERING动效与层级 Motion & Layering
动效 = 时长 + 缓动的组合，150–250ms 三档覆盖绝大多数界面反馈；层级用四个 z token 表达悬浮顺序，不写魔法数字。
动效时长 motion-duration · 4
| Token 名称 | 时长 | 示例 |
|---|
| motion-duration-reduced | 0ms | |
| motion-duration-fast | 150ms | |
| motion-duration-normal | 200ms | |
| motion-duration-slow | 300ms | |
缓动 motion-ease · 4
| Token 名称 | 缓动函数 | 示例 |
|---|
| motion-ease-emphasized | cubic-bezier(0.05, 0.7, 0.1, 1) | |
| motion-ease-enter | cubic-bezier(0.4, 1, 0.6, 1) | |
| motion-ease-exit | cubic-bezier(0.4, 0, 1, 1) | |
| motion-ease-standard | cubic-bezier(0.2, 0, 0, 1) | |
动画关键帧 animate · 5
| Token 名称 | 动画参数 |
|---|
| animate-accordion-down | accordion-down {desktop.motion-duration-normal} {desktop.motion-ease-enter} |
| animate-accordion-up | accordion-up {desktop.motion-duration-normal} {desktop.motion-ease-enter} |
| animate-fade-in | fade-in {desktop.motion-duration-fast} {desktop.motion-ease-enter} |
| animate-slide-in | slide-in {desktop.motion-duration-normal} {desktop.motion-ease-enter} |
| animate-slide-out | slide-out {desktop.motion-duration-fast} {desktop.motion-ease-exit} |
层级 z · 6
| Token 名称 | 层级值 | 示例 |
|---|
| z-sticky-cell | 10 | 10 |
| z-sticky-header | 20 | 20 |
| z-sticky-corner | 30 | 30 |
| z-popover | 50 | 50 |
| z-modal | 60 | 60 |
| z-toast | 70 | 70 |
光标 cursor · 2
cursor-interactivecursor: pointer · 把鼠标移上来试试
cursor-staticcursor: default · 把鼠标移上来试试
焦点环 focus-ring · 2
| Token 名称 | 尺寸 | 示例 |
|---|
| focus-ring-offset | 2px | 聚焦态示例 |
| focus-ring-width | 3px | 聚焦态示例 |