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
Source:
{.wow .bounce}
Inline HTML
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?