Skip to content

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 v4

You can add more via the @theme at-rule, see Config for more info.
Include CSS file with the @utility at-rule.

View Source 
css
@import "winduum/tailwindcss/utilities/animation.css";

Example

css
@theme {
    --animation-fade-in: fade-in;
}
html
<div class="animation animation-fade-in">
    Content
</div>
css
.animation {
    animation-duration: var(--default-animation-duration, var(--default-transition-duration));
    animation-fill-mode: both;
}

.animation-fade-in {
  animation-name: var(--animation-fade-in);
}

or use arbitrary value

html
<div class="animation animation-[fade-in]">
    Content
</div>
css
.animation {
    animation-duration: var(--default-animation-duration, var(--default-transition-duration));
    animation-fill-mode: both;
}

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

TailwindCSS v3

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

Example

html
<div class="animation animation-fade-in">
    Content
</div>
css
.animation {
    animation-duration: var(--default-animation-duration, var(--default-transition-duration));
    animation-fill-mode: both;
}

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

Released under the MIT License.