Animation

Where can use? some example ..!
How to use
  1. By adding clases

    Add the class animate__animated to an element, along with any of the animation names (don't 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-5s

    Slow, slower, fast, and Faster classes

    animate__slow, animate__slower, animate__fast, animate__faster

    Repeating classes

    animate__repeat-1, animate__repeat-2, animate__repeat-3, animate__infinite
  2. Using @keyframes

    Even though the library provides you a few helper classes like the animated 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! */ }

  3. 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; }