Utilities
Animation
Spin, ping, pulse and bounce keyframe animations that respect reduced motion.
5classes
10variant classes
1properties
Live example
<div class="flex flex-wrap items-center gap-8">
<div class="size-10 rounded-full border-4 border-muted border-t-primary animate-spin"></div>
<span class="relative flex size-4"><span class="absolute inset-0 rounded-full bg-accent opacity-75 animate-ping"></span><span class="relative size-4 rounded-full bg-accent"></span></span>
<div class="h-4 w-32 rounded bg-muted animate-pulse"></div>
<div class="size-8 rounded-full bg-primary animate-bounce"></div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example motion-safe:animate-none. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | not generated | 0 |
| Group and peer | not generated | 0 |
| Structure | not generated | 0 |
| Motion | motion-safe:motion-reduce: | 5 |
| Scheme | not generated | 0 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | not generated | 0 |
Animation 5
Variants: motion-safe:motion-reduce:
| Class | CSS |
|---|---|
animate-none | animation: none; |
animate-spin | animation: m-spin 1s linear infinite; |
animate-ping | animation: m-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; |
animate-pulse | animation: m-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
animate-bounce | animation: m-bounce 1s infinite; |