Free Tailwind Animation Generator Online - Create CSS Animations with Tailwind

Create beautiful CSS animations using Tailwind CSS classes. Free online Tailwind animation generator with preview. No signup needed.

Animation Settings

Name

Duration: 500ms

Delay: 0ms

Timing

Iteration

Direction

Fill Mode

Output Code

@import "tailwindcss";

@theme {
  --animate-custom-animation: custom-animation 500ms ease-in-out 1 normal forwards;

  @keyframes custom-animation {
    0% { opacity: 0; transform: translate(0px, 20px); }
    100% { ; }
  }
}

/* Usage: <div class="animate-custom-animation">...</div> */

Preview

custom