duration-75…1000 — how long transitions run. This family contains 9 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
duration-0 | transition-duration: 0s; |
duration-75 | transition-duration: 75ms; |
duration-100 | transition-duration: 100ms; |
duration-150 | transition-duration: 150ms; |
duration-200 | transition-duration: 200ms; |
duration-300 | transition-duration: 300ms; |
duration-500 | transition-duration: 500ms; |
duration-700 | transition-duration: 700ms; |
duration-1000 | transition-duration: 1000ms; |
Example#
example
<div class="transition duration-300">Standard ease</div>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Micro-interactions: 150ms; reveals: 300ms; drama: 500ms+
Related#
utilities/animations/keyframes|Animations · utilities/transitions/timing-function|Easing