tailwindcss-animate

You can apply animation duration utilities conditionally using Tailwind variant modifiers such as state modifiers (hover, focus) or responsive breakpoints (md, lg, etc.).

Examples:

• Hover state: Use hover:duration-0 to stop an animation on hover.
• Responsive breakpoints: Use md:duration-0 to change the duration at specific screen sizes.

You can use Tailwind CSS variant modifiers to apply zoom-in scales based on states or media queries.

• States: Use hover:zoom-in-50 to apply the scale only on hover.
• Breakpoints: Use md:zoom-in-50 to apply the scale only at medium screen sizes and above.
• Other modifiers: Works with dark mode, prefers-reduced-motion, and other standard Tailwind modifiers.

To trigger an entrance animation, use the animate-in utility combined with specific effect utilities:

• Fade: fade-in
• Spin: spin-in
• Zoom: zoom-in
• Slide: slide-in-from-{direction} (e.g., slide-in-from-top, slide-in-from-left)

For one-off translation values that are not part of your theme, use Tailwind's arbitrary value syntax with square brackets: slide-out-to-{direction}-[value].

<div class="slide-out-to-left-[17rem]">
	<!-- ... -->
</div>

You can use Tailwind CSS variant modifiers to apply exit translation utilities based on user interaction or screen size.

• States: Use modifiers like hover:, focus:, etc. (e.g., hover:slide-out-to-right).
• Breakpoints: Use responsive modifiers like md:, lg:, etc. (e.g., md:slide-out-to-right).

You can apply timing functions based on interaction states or media queries using Tailwind variant modifiers.

• States: Use modifiers like hover:ease-in-out or focus:ease-out to change the timing function during specific interactions.
• Responsive/Media Queries: Use modifiers like md:ease-in-out for breakpoints, or modifiers for dark mode and prefers-reduced-motion.

You can use Tailwind CSS variant modifiers to apply enter animation opacity based on states or media queries:

• States: Use modifiers like hover:fade-in-50 to apply opacity only on hover.
• Breakpoints: Use responsive modifiers like md:fade-in-50 to apply opacity at specific screen sizes.
• Media Queries: Supports dark mode, prefers-reduced-motion, and other standard Tailwind modifiers.

You can apply rotation utilities using Tailwind CSS variant modifiers such as hover, focus, or responsive breakpoints.

• States: Use hover:spin-in-90 to apply rotation only on hover.
• Breakpoints: Use md:spin-in-90 to apply rotation only at medium screen sizes and above.

You can apply animation delay utilities conditionally using Tailwind's variant modifiers, such as state modifiers (hover, focus) or responsive breakpoints.

• States: Use hover:delay-0 to apply a delay only when hovering.
• Breakpoints: Use md:delay-0 to apply a delay only at medium screen sizes and above.
• Media Queries: Works with dark: mode and prefers-reduced-motion modifiers.

You can use Tailwind variant modifiers to apply iteration count utilities based on state or media queries:

• States: Use modifiers like hover:repeat-1 to change the iteration count on hover.
• Breakpoints: Use responsive modifiers like md:repeat-1 to apply the utility at specific screen sizes and above.
• Media Queries: Supports other modifiers like dark: or prefers-reduced-motion:.