Skip to content
On this page

Animation Name

ClassProperties (MDN)
animate-noneanimation-name: none;
animate-[name]animation-name: name;


<div class="animate-bounce">Foo</div>
<div class="animate-[bounce_1s_ease-in-out_infinite]">Bar</div>

Refer the demo to see the available animations in action. You can play with them here.

Also refer the official Tailwind CSS documentation on using animations with arbitrary values. Note that these classes add some default properties and keyframe definitions too.

Released under the MIT License.