Migration Guide

tailwindcss-animate

Animations part remains as is, but way more flexible and powerful thanks to UnoCSS's dynamic rules . Please refer to Animations.

Animation property modifiers are already supported by @unocss/preset-wind or @unocss/preset-uno, but with slightly different syntax.

animation-delay

tailwindcss-animate	unocss-preset-animations
delay-<number>	animate-delay-<number>

<button class="animate-in fade-in animate-delay-150">Button A</button>
<button class="animate-in fade-in animate-delay-300">Button B</button>
<button class="animate-in fade-in animate-delay-700">Button C</button>

animation-direction

tailwindcss-animate	unocss-preset-animations
direction-<keyword>	animate-<keyword>
	animate-direction-<keyword>

<button class="animate-in fade-in animate-normal">Button A</button>
<button class="animate-in fade-in animate-reverse">Button B</button>
<button class="animate-in fade-in animate-alternate">Button C</button>
<button class="animate-in fade-in animate-alternate-reverse">Button D</button>

<button class="animate-in fade-in animate-direction-normal">Button E</button>

animation-duration

tailwindcss-animate	unocss-preset-animations
duration-<number>	animate-duration-<number>

<button class="animate-in fade-in animate-duration-150">Button A</button>
<button class="animate-in fade-in animate-duration-300">Button B</button>
<button class="animate-in fade-in animate-duration-700">Button C</button>

TIP

If no animation-duration is defined, it will fall back to theme.duration.DEFAULT.

The value is 150ms by default if unchanged, see unocss/packages/preset-mini/src/_theme/misc.ts at main · unocss/unocss

animation-fill-mode

tailwindcss-animate	unocss-preset-animations
fill-mode-<keyword>	animate-<keyword>
	animate-fill-<keyword>
	animate-mode-<keyword>
	animate-fill-mode-<keyword>

<button class="animate-in fade-in animate-none">Button A</button>
<button class="animate-in fade-in animate-forwards">Button B</button>
<button class="animate-in fade-in animate-backwards">Button C</button>
<button class="animate-in fade-in animate-both">Button D</button>

<button class="animate-in fade-in animate-fill-none">Button E</button>
<button class="animate-in fade-in animate-mode-none">Button F</button>
<button class="animate-in fade-in animate-fill-mode-none">Button G</button>

animation-iteration-count

tailwindcss-animate	unocss-preset-animations
repeat-<number|keyword>	animate-iteration-<number|keyword>
	animate-count-<number|keyword>
	animate-iteration-count-<number|keyword>

<button class="animate-in fade-in animate-iteration-0">Button A</button>
<button class="animate-in fade-in animate-iteration-1">Button B</button>
<button class="animate-in fade-in animate-iteration-infinite">Button C</button>

<button class="animate-in fade-in animate-count-0">Button D</button>
<button class="animate-in fade-in animate-iteration-count-0">Button E</button>

animation-play-state

tailwindcss-animate	unocss-preset-animations
running / paused	animate-<keyword>
	animate-play-<keyword>
	animate-state-<keyword>
	animate-play-state-<keyword>

<button class="animate-in fade-in animate-paused">Button A</button>
<button class="animate-in fade-in animate-running">Button B</button>

<button class="animate-in fade-in animate-play-paused">Button C</button>
<button class="animate-in fade-in animate-state-paused">Button D</button>
<button class="animate-in fade-in animate-play-state-paused">Button E</button>

animation-timing-function

tailwindcss-animate	unocss-preset-animations
ease-<easing>	animate-ease-<easing>

<button class="animate-in fade-in animate-ease-linear">Button A</button>
<button class="animate-in fade-in animate-ease-in">Button B</button>
<button class="animate-in fade-in animate-ease-out">Button C</button>
<button class="animate-in fade-in animate-ease-in-out">Button D</button>

Prefers reduced motion

Usage is the same as in TailwindCSS.

<button class="motion-reduce:...">Button A</button>
<button class="motion-safe:...">Button B</button>