#### Animation

##### Where can use? some example ..!

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 entrances

- zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

Sliding entrances

- slideInDown slideInLeft slideInRight slideInUp

Sliding exits

- slideOutDown slideOutLeft slideOutRight slideOutUp

##### 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; }`