Entrada

Animaciones básicas con Animate.css

Publicado
Preview Image
Por Marco Contreras
6 min de lectura

Animate.css es una librería que ofrece animaciones predefinidas, como fadeIn, bounce, zoomIn, entre otras. Ideal para añadir una mejora visual sin escribir líneas complejas de código o definir manualmente @keyframes.

Resulta especialmente útil en páginas de aterrizaje, componentes interactivos como botones, alertas, banners o cualquier elemento que busque captar la atención de forma sutil y efectiva.

Usa las animaciones con moderación. Un exceso puede distraer al usuario y afectar la experiencia. Elige animaciones que refuercen la interfaz, no que compitan con el contenido.

Instalación

Antes de comenzar a usar Animate.css, necesitas incluirla en tu proyecto. Puedes hacerlo de distintas formas:

Opción 1 : Vía CDN

Para usar a través de una CDN agrega esto a tu <head>:

1

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

Opción 2 : Con npm

Para tener la librería instalada en el proyecto, usa npm:

1

npm install animate.css --save

Y luego importalo en tu CSS o JavaScript:

1

import 'animate.css';

Cómo usar las animaciones

Una vez incluida la librería, solo se necesita dos clases:

  • animate__animated → Clase base (con 2 guiones bajos)
  • animate__NOMBRE_DE_ANIMACIÓN_ → La animación que quieres usar
  • 1

    <h1 class="animate__animated animate__bounce">¡Hola mundo!</h1>
  • ¡Hola mundo!

También puedes controlar la velocidad, duración, repetición y retardo con clases adicionales:

  • 1
2
3
4
5

    <p class="animate__animated
  animate__bounce animate__delay-2s
  animate__repeat-2">
    Este texto rebota con retardo.
</p>

  • Este texto rebota con retardo.

Las clases comienzan con animate__ por convención desde la versión 4.0 de Animate.css. No olvides este prefijo.

Animaciones populares

NombreDescripción
fadeInAparece suavemente
bounceRebota
zoomInHace zoom al aparecer
flipGira en 3D
slideInLeftEntra desde la izquierda

Animar al mostrar un formulario

Puedes animar un formulario completo cuando se carga la página o cuando aparece (por ejemplo, en un modal).

  • 1
2
3
4
5
6
7
8
9

    <form class="animate__animated animate__fadeInUp">
  <label for="email">Correo:</label>
  <input type="email" id="email" name="email" required />

  <label for="password">Contraseña:</label>
  <input type="password" id="password" name="password" required />

  <button type="submit">Iniciar sesión</button>
</form>

Recomendación: fadeInUp, slideInDown, o zoomIn son animaciones suaves ideales para formularios.

Reforzar validaciones

También puedes usar las animaciones para destacar campos con errores después de la validación, como un pequeño rebote o sacudida y aplicar esa clase solo si hay un error usando JavaScript:

  • 1
2
3
4
5
6
7
8
9
10
11
12

    <form id="miFormulario">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" />

  <span id="errorNombre"
    class="mensaje-error"
    style="display: none;">
      Este campo es obligatorio
  </span>

  <button type="submit">Enviar</button>
</form>

  • 1
2
3
4
5
6

    .mensaje-error {
  color: red;
  font-size: 0.9em;
  margin-top: 4px;
  display: block;
}

  • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    const formulario = document.getElementById('miFormulario');
const inputNombre = document.getElementById('nombre');
const errorNombre = document.getElementById('errorNombre');

formulario.addEventListener('submit', function (e) {
  e.preventDefault(); // Evita el envío real
  if (!inputNombre.value.trim()) {
    // Mostrar el mensaje de error
    errorNombre.style.display = 'block';

    // Reiniciar animación si ya se aplicó antes
    inputNombre.classList.remove('animate__animated', 'animate__shakeX');
    void inputNombre.offsetWidth; // Fuerza el reflow
    inputNombre.classList.add('animate__animated', 'animate__shakeX');
  } else {
    errorNombre.style.display = 'none';
    inputNombre.classList.remove('animate__shakeX');
    alert('Formulario enviado correctamente');
  }
});

Aquí está el resultado. Prueba presionar el botón sin escribir:

Controlar duración, retraso y repetición

Podemos manejar el comportamiento de la animación a través de variables CSS para definir la duración, el retraso y las iteraciones de la animación. Esto hace que Animate.css sea muy flexible y personalizable. Ejemplo:

1
2
3
4
5

.custom-timing {
    --animate-duration: 2s;
    --animate-delay: 1s;
    --animate-repeat: 10;
}

Luego, la usamos en nuestro elemento HTML:

  • 1
2
3

    <div class="animate__animated animate__fadeIn custom-timing">
  Cargando...
</div>
  • Cargando...

Para animar al hacer scroll, combina Animate.css con librerías como AOS o usa un IntersectionObserver en JavaScript para añadir las clases dinámicamente.

Aunque la librería ofrece algunas clases como animated para usar las animaciones rápidamente, también podemos usar animaciones a través de clases CSS. Esto proporciona una forma flexible de usar las animaciones de Animate.css, sin tener que refactorizar el html.

Ejemplo:

  • 1
2
3
4
5
6
7
8

    <style>
.mi-clase {
    display: inline-block;
    animation: bounce;
    animation-duration: 2s;
}
</style>
<div class="mi-clase">¡Hola, soy un rebote!</div>
  • ¡Hola, soy un rebote!

Teniendo en cuenta que algunas animaciones dependen de la propiedad animation-timing establecida en la clase de animación.

Para cambiar la duración de una animación simplemente se establece el nuevo valor global o localmente. Ejemplo:

1
2
3
4
5
6
7

.animate__animated.animate__bounce {
  --animate-duration: 2s;
}
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.95;
}

Las propiedades personalizadas también facilitan el cambio sobre la marcha de todas las propiedades, lo que significa que puedes tener un efecto de camara lenta o de lapso de tiempo con una sola línea de JavaScript. Ejemplo:

1
2

document.elemento.style.setProperty('--animate-duration', '2s');
document.elemento.style.setProperty('--animate-duration', '5s');

Clases de utilidad

A continuación tienes algunas clases que puedes ir experimentando y sirven para configurar rápido una animación.

1
2
3

<div class="animate__animated animated__bounce animate__delay_2s">
    Ejemplo
</div>

Controlar el tiempo:

1
2
3
4

animate__delay-2s => animate__slow  # 2s   
animate__delay-3s => animate__slower # 3s
animate__delay-4s => animate__fast # 800ms
animate__delay-5s => animate__faster # 500ms v

Accesibilidad con media queries

Siempre considera la accesibilidad. Algunas personas prefieren reducir o desactivar las animaciones. Apóyate en prefers-reduced-motion que es una media query de CSS que detecta su el usuario ha activado la opción del sistema para reducir el movimiento.

Con esta media query puedes condicionar tus animaciones para que se desactiven, reduzcan o se remplacen cuando el usuario lo solicite.

Opcion 1 : Desactivar las animaciones

1
2
3
4
5

@media (prefers-reduced-motion: reduce) {
  .animate__animated {
    animation: none !important;
  }
}

Opcion 2 : Reducir la duración

1
2
3
4
5
6

@media (prefers-reduced-motion: reduce) {
  .animate__animated {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

En lugar de eliminar la animación, la haces casi instantanéa.

Opcion 3 : Aplicar solo si el usuario NO quiere reducir movimiento

1
2
3
4
5

@media (prefers-reduced-motion: no-preference) {
  .mi-elemento {
    animation: fadeIn 1s ease-in-out;
  }
}

Esto aplica la lógica inversa. En lugar de desactivar animaciones para quienes quieren menos movimiento, activas animaciones solo si el usuario no ha pedido lo contrario.

Repositorio y demostración

Pasa por el repositorio, ahí encontrarás el código completo por si quieres revisar más cosas sobre Animate.css o clonarlo para experimentar por tu cuenta.

Cargando repositorio...

🚀 https://mc-herrera-90.github.io/demo-animate-css/

Animate.css es una librería ligera y sencilla de utilizar para agregar animaciones a tu sitio web con solo unas clases CSS. Personalizable y compatible con cualquier proyecto moderno, es una excelente opción para mejorar la experiencia visual sin complicaciones.

Desarrollo Web, CSS
Esta entrada está licenciada bajo CC BY 4.0 por el autor.