Usage

See https://animate.style, copy class names without the prefix animate__

Classes

Attention seekers

  • bounce

flash pulse rubberBand shakeX shakeY headShake swing tada wobble jello heartBeat

Back entrances

  • backInDown

backInLeft backInRight backInUp

Back exits

  • backOutDown

backOutLeft backOutRight backOutUp

Bouncing entrances

  • bounceIn

bounceInDown bounceInLeft bounceInRight bounceInUp

Bouncing exits

  • bounceOut

bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

Fading entrances

  • fadeIn

fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeInTopLeft fadeInTopRight fadeInBottomLeft fadeInBottomRight

Fading exits

  • fadeOut

fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig fadeOutTopLeft fadeOutTopRight fadeOutBottomRight fadeOutBottomLeft

Flippers

  • flip

flipInX flipInY flipOutX flipOutY

Lightspeed

  • lightSpeedInRight

lightSpeedInLeft lightSpeedOutRight lightSpeedOutLeft

Rotating entrances

  • rotateIn

rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

Rotating exits

  • rotateOut

rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

Specials

  • hinge

jackInTheBox rollIn rollOut

Zooming entrances

  • zoomIn

zoomInDown zoomInLeft zoomInRight zoomInUp

Zooming exits

  • zoomOut

zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

Sliding entrances

  • slideInDown

slideInLeft slideInRight slideInUp

Sliding exits

  • slideOutDown

slideOutLeft slideOutRight slideOutUp

Utilities

Class name Default delay time
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s

Remove prefixes

Class name Default speed time
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms

Repeating classes

You can control the iteration count of the animation by adding these classes, like below:

Remove prefixes

Class Name Default iteration count
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite

Markdown attributes

Blue sky and clouds

Source:

![Blue sky and clouds](/illustrations/cloud.jpg)
{.wow .bounce}

Inline HTML

Blue sky and clouds

Source:

<img class="wow flash" src="/illustrations/cloud.jpg" alt="Blue sky and clouds">

Test 3 wow

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam provident voluptatum ipsam, hic, qui fugiat possimus nulla corporis, ea cumque reprehenderit? Labore provident aspernatur aut unde commodi! Natus, debitis facere?