Add the class animate__animated to an element, along with any of the animation names forget the animate__ prefix!):
<h5 class="animate__animated animate__bounce">An animated element</h5>
Utility Classes
Animate.css provides the following delays:
animate__delay-2s, animate__delay-3s, animate__delay-4s, animate__delay-5sSlow, slower, fast, and Faster classes
animate__slow, animate__slower, animate__fast, animate__fasterRepeating classes
animate__repeat-1, animate__repeat-2, animate__repeat-3, animate__infiniteEven though the library provides you a few helper classes like theanimated class to get you up running quickly, you can directly use the provided animations keyframes. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.
Example:
.my-element { display: inline-block; margin: 0 0.5rem; animation: bounce; /* referring directly to the animation's @keyframe declaration */ animation-duration: 2s; /* don't forget to set a duration! */}Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, delay, and iterations. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value globally or locally.
Example:
/* This only changes this particular animation duration */.animate__animated.animate__bounce { --animate-duration: 2s;}
/* This changes all the animations globally */:root { --animate-duration: 800ms; --animate-delay: 0.9s;}