Animar con libreria Animate css elementos html

Animate.css es una biblioteca de animaciones entre navegadores listas para usar para usar en sus proyectos web. Ideal para énfasis, páginas de inicio, controles deslizantes y sugerencias de guía de atención.

Animate css, una librería para crear animaciones con CSS

→ Ir a Página Oficial Animate.css

→ Ir a Descargar animate.css aquí.

→ Ir a https://github.com/daneden/animate.css

Licencia y contribución

Animate.css tiene licencia bajo la licencia MIT. (https://opensource.org/licenses/MIT)

Como Implementar Animate v4.1.1 en tu web

Implementar Animate usando versión remota (alojada por CDNJS)

<-link
   rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  -/>

Uso básico Animate v4.1.1

Poniendo las etiquetas propias de animate directamente en la clase 

Después de instalar Animate.css, devemos agregar 2 clases al elemento que deseamos animar:

• La primera clase es  animate__animated
• La segunda clase es el  nombre de la animación) , ejemplo :

<h1 class="animate__animated animate__bounce">An animated element</h1>

Usando animate creando un estilo css 

<h1 class="mi_animacion_1">An animated element</h1>

.mi_animacion_1{
    animation: backInDown;
    animation-duration: 2s;        
    animation-delay: 3s;      
}

Definición de las clases de animate

animation-delay

Con animation-delay podemos definir cuanto tiempo debe pasar hasta que empiece la animación. También podemos definir el tiempo con segundos y milisegundos, eso sí, podemos definir un delay negativo, lo que afecta a la línea de tiempo de la animación.

Si tenemos una animación de 2 segundos y definimos un animation-delay: -1s la animación empezará a ejecutarse de forma inmediata y además empezará en el segundo 1.

La clase animation-delay  sirve para hacer que la animación tarde en empezar.

No puedes animar elementos en línea

Aunque algunos navegadores pueden animar elementos en línea, esto va en contra de las especificaciones de animación CSS y fallará en algunos navegadores o eventualmente dejará de funcionar. Siempre anime los elementos de nivel de bloque o de bloque en línea (los contenedores de cuadrícula y flexibles y los elementos secundarios también son elementos de nivel de bloque).

Puede configurar un elemento display: inline-block cuando anima un elemento de nivel en línea.

Desventajas de Animate.css 

→ La solución para que la animación espere hasta visualizar el pie de pagina es usar la librería  WOW.js   que funciona con  Animate.css , pero recuerda que solo se ejecutara la animación una sola vez al cargar la pagina y al visualizar el pie de pagina , si deseas que se ejecute otra vez la animación tenemos que cargar otra vez la pagina.

Referencia

Animaciones CSS  

Animate css - Cómo crear animaciones CSS rápido