duration.instant | 50ms | |
duration.fast-1 | 100ms | |
duration.fast-2 | 150ms | |
duration.normal-1 | 200ms | |
duration.normal-2 | 300ms | |
duration.slow-1 | 400ms | |
duration.slow-2 | 500ms | |
duration.extra-slow | 700ms | |
easing.standard | cubic-bezier(0.2, 0, 0, 1) | |
easing.standard-decelerate | cubic-bezier(0, 0, 0, 1) | |
easing.standard-accelerate | cubic-bezier(0.3, 0, 1, 1) | |
easing.emphasized | cubic-bezier(0.2, 0, 0, 1) | |
easing.emphasized-decelerate | cubic-bezier(0.05, 0.7, 0.1, 1) | |
easing.emphasized-accelerate | cubic-bezier(0.3, 0, 0.8, 0.15) | |
easing.spring | cubic-bezier(0.34, 1.56, 0.64, 1) | |
easing.linear | linear | |
motion-preset.micro | var(--duration-instant) var(--easing-standard) | |
motion-preset.quick | var(--duration-fast-1) var(--easing-standard) | |
motion-preset.hover | var(--duration-fast-2) var(--easing-standard) | |
motion-preset.default | var(--duration-normal-1) var(--easing-standard) | |
motion-preset.smooth | var(--duration-normal-2) var(--easing-standard) | |
motion-preset.enter | var(--duration-normal-1) var(--easing-standard-decelerate) | |
motion-preset.exit | var(--duration-normal-1) var(--easing-standard-accelerate) | |
motion-preset.enter-emphasized | var(--duration-normal-2) var(--easing-emphasized-decelerate) | |
motion-preset.exit-emphasized | var(--duration-normal-1) var(--easing-emphasized-accelerate) | |
motion-preset.spring | var(--duration-slow-1) var(--easing-spring) | |