基础
动效
一条曲线,三档时长,以及一条不可选的减少动效规则。
整套系统一条缓动曲线。三档时长:--fast 用于状态翻转,--mid 用于面板,--slow 用于页面大小的东西。需要第四档的组件,通常是在做两件事。
包里每一个动画都挡在 motion-safe 后面,动效层还带一条减少动效规则,会停掉任何标了 data-m22-animated 的东西。要求少一点动效的读者拿到的是终态,而不是同一段动作的快进版。
动效 token
| Token | 值 | 备注 | |
|---|---|---|---|
--ease | cubic-bezier(0.2, 0.7, 0.3, 1) | ─── Motion ─── | |
--fast | 0.13s | — | |
--mid | 0.22s | — | |
--slow | 0.34s | — | |
--ease-out-expo | var(--ease) | — | |
--duration-fast | var(--fast) | — | |
--duration-base | var(--mid) | — | |
--duration-slow | var(--slow) | — |