animate-spin/ping/pulse/bounce plus custom keyframes via theme.animation. This family contains 8 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
animate-none | animation: none; |
animate-spin | animation: spin 1s linear infinite; |
animate-ping | animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; |
animate-pulse | animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
animate-bounce | animation: bounce 1s infinite; |
animate-fade | animation: fade 300ms ease-out; |
animate-slide | animation: slide 300ms ease-out; |
animate-shimmer | animation: shimmer 1.5s linear infinite; |
Example#
example
<span class="animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full"></span>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) 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#
- The spinner recipe above is the canonical loading state
- Custom keyframes: theme.extend.keyframes + animation
Common mistakes#
- Animating without motion-safe: breaks vestibular accessibility — gate with motion-safe:
Related#
utilities/transitions/transition-property|Transitions