Animation Generator
Choose a ready-made animation, tweak how it plays, and copy it as a Tailwind v4 theme entry with its keyframes, or as plain CSS.
@theme {
--animate-slide-up: slide-up 0.5s ease-out 1 both;
@keyframes slide-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
}<div class="animate-slide-up">...</div>
animate-[slide-up_0.5s_ease-out_1_both]
@keyframes slide-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.element {
animation: slide-up 0.5s ease-out 1 both;
}Frequently asked questions
How do I add a custom animation in Tailwind CSS v4?
Define it inside @theme: set --animate-name to an animation shorthand and add a @keyframes name block. Tailwind then generates an animate-name class you can use anywhere.
How do I make an animation play only once?
Set the iteration count to 1, and use the forwards or both fill mode so the element stays in its final state instead of snapping back when the animation ends.
What is the difference between a transition and an animation?
A transition runs between two states when something changes, like hover. An animation runs on its own timeline with keyframes, can repeat, and does not need a trigger.
How do I respect users who prefer reduced motion?
Wrap motion in the motion-safe: variant, for example motion-safe:animate-float, or turn animations off with motion-reduce:animate-none. Decorative loops especially should not run for those users.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.