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 SourceDependencies
- tailwindcss (TailwindCSS v4 @utility)
- winduum (TailwindCSS v3 plugin)
TailwindCSS v4
You can add more via the @theme
at-rule, see Config for more info.
Include CSS file with the @utility
at-rule.
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;
}