Animation
Where can use? some example ..!
How to use
-
By adding clases
Add the class
animate__animatedto an element, along with any of the animation names (don't forget theanimate__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__infinite -
Using @keyframes
Even though the library provides you a few helper classes like the
animatedclass to get you up running quickly, you can directly use the provided animationskeyframes. 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! */ } -
CSS Custom Properties (CSS Variables)
Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, 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; }