Build your custom
animations with ease.

Add the animation plugin to your Tailwind CSS project and generate your animation using the configurator.

Get in full control.

Set all the CSS animation properties with the interactive configurator without even touching the code. Opt in every property required for your needs.

animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-timing-function

JIT support for tiny build sizes.

You might be concerned that all the unused premade animations could slow down your application?
We’ve got you covered.
The Animation plugin makes use of Tailwinds Just-in-Time engine, effectively removing everything that you did not use in your project.

Ready to go in like a minute.

Install the plugin with a single command in your terminal. Take a look at the readme for a detailed guide.

> npm install -D tailwindcss > npx tailwindcss init > npm install -D tailwindcss-animated

Ships with the most commonly used premade animations.

Quickly need some animations to spice up your application?
Simply use some of the premade animations with different levels of complexity. You can still apply all of the available CSS properties to make it fit into your project perfectly.

wiggle

wiggle-more

rotate-y

rotate-x

jump

jump-in

jump-out

spin

ping

pulse

bounce

shake

fade

fade-down

fade-up

fade-left

fade-right

flip-up

flip-down

Still not convinced?
Then take a look at the animation configurator.

Control all the plugins' options with an interactive interface
Play your animation inside the editor to see it in action
Check your animations look on a button, image, text and many more
View all premade animations and customize them on a fly
Get all the required classes with just one click and simply paste them into your projects code to recreate that exact animation

Try now

Build your custom animations with ease.