delay-75…1000 — stagger transitions. This family contains 9 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
delay-0 | transition-delay: 0s; |
delay-75 | transition-delay: 75ms; |
delay-100 | transition-delay: 100ms; |
delay-150 | transition-delay: 150ms; |
delay-200 | transition-delay: 200ms; |
delay-300 | transition-delay: 300ms; |
delay-500 | transition-delay: 500ms; |
delay-700 | transition-delay: 700ms; |
delay-1000 | transition-delay: 1000ms; |
Example#
example
<div class="transition delay-150">Follows the leader</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#
- Stagger cards with delay-75/150/225
Common mistakes#
- Delays on hover-out feel laggy — apply delays only on hover-in via variants
Related#
utilities/animations/keyframes|Animations · utilities/transitions/timing-function|Easing