Animation

Provides a new utility class animation and TailwindCSS utility class animation-* for animation-name property.

You should use this together with Keyframes or use your own animation keyframes.

View Source 

Dependencies

• tailwindcss
• winduum (TailwindCSS v3 plugin)

TailwindCSS v3

You can add more via the tailwind.config.js, see Config for more info.

TailwindCSS v4

You can add more via the @theme at-rule, see Config for more info.

DANGER

Not yet supported.

Example

<div class="animation animation-fade-in">
    Content
</div>

.animation {
    animation-duration: var(--default-animation-duration, var(--default-transition-duration));
    animation-fill-mode: both;
}

.animation-fade-in {
  animation-name: fade-in;
}