Animar con libreria Animate css elementos html

Fecha Publicación:       09 de Enero de 2020
Fecha Modificación:       25 de Enero de 2023

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:

<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 

→ Recuerda Animate.css  se ejecuta al cargar la pagina y no al hacer scroll , si ponemos una animacion al pie de la pagina  y cargamos la pagina , la animacion del pie de la pagina se ejecutara y nosotros no lo veriamos , porque primero veriamos la cabecera y recien al hacer scroll hacia abajo veriamos el pie de pagina , pero ya la animación se ha ejecutado. 

→ 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.

  → Otra solución para Animar varias veces sin recargar la pagina y cuando se visualice el objeto a animar es usando Intersection Observer 

Referencia

Animaciones CSS  

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

 

See the Pen Animate.css ejemplo 2 by alex huiza (@alextutor) on CodePen.



Ejemplo 2

See the Pen Animate.css ejemplo2 by alex huiza (@alextutor) on CodePen.

Articulo : 1757 - Veces Leidas
Compartir Articulo: