Tipos de animaciones en CSS - auladigital2.com

Tipos de animaciones en CSS: ¿Cuál deberías usar?

El universo de las animaciones en CSS es amplio y diverso. Existen múltiples tipos de animaciones, cada una con características únicas y casos de uso específicos. Conocer sus diferencias es clave para elegir la técnica más adecuada según el efecto deseado.

Comparativa general de animaciones

Tipo de animación	Características principales
Transiciones	Cambios simples entre dos estados.
Animaciones	Secuencias con múltiples estados y mayor complejidad.
Trayectos animados	Movimiento a lo largo de rutas definidas.
Animaciones por scroll	Se activan o progresan con el desplazamiento de la página.
View Transitions	Efectos visuales entre cambios de vista o navegación entre páginas.
WebAnimations API	Animaciones controladas por JavaScript, ideales para mayor interacción.

1. Transiciones CSS

Las transiciones permiten suavizar el cambio de una propiedad CSS cuando se produce una interacción, como pasar el cursor sobre un elemento. Son simples, efectivas y perfectas para efectos sutiles.

cssCopiarEditar.box {
  width: 200px;
  height: 200px;
  background: indigo;
  transition: background 1s linear;
}

.box:hover {
  background: hotpink;
}

Cuándo no usar solo transiciones:

Si necesitas que la animación se ejecute automáticamente.
Si quieres que se repita indefinidamente.
Si hay más de dos estados involucrados.
Si buscas un comportamiento más sofisticado.

2. Animaciones (con `@keyframes`)

A diferencia de las transiciones, las animaciones permiten definir múltiples estados intermedios y no dependen de una acción del usuario para comenzar.

cssCopiarEditar.box {
  width: 200px;
  height: 200px;
  background: grey;
  animation: change-color 3s infinite alternate linear;
}

@keyframes change-color {
  0% { background: red; }
  50% { background: gold; }
  100% { background: green; }
}

Se pueden animar propiedades como colores, tamaños, posiciones, bordes y más.

3. Trayectorias animadas (Motion Paths)

Cuando lo que se busca es mover un elemento siguiendo una ruta específica, las trayectorias animadas son la solución. Se pueden definir con funciones como path() o polygon().

cssCopiarEditar.box {
  width: 50px;
  height: 75px;
  background: indigo;
  border-left: 5px solid hotpink;
  border-right: 5px solid red;
  offset-path: path("m 0 25 h 150 v 100 h 100");
  animation: move 3s infinite alternate linear;
}

@keyframes move {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

Este enfoque es ideal para simular movimientos complejos en líneas curvas o irregulares.

4. Animaciones activadas por scroll

Estas animaciones dependen del desplazamiento vertical del usuario. A medida que se hace scroll, los elementos cambian visualmente, sincronizados con el movimiento.

cssCopiarEditar.indicator .bar {
  width: 0%;
  height: 100%;
  background: gold;
  animation: resize auto linear;
  animation-timeline: scroll(root block);
}

@keyframes resize {
  0% { width: 0%; }
  100% { width: 100%; }
}

El contenido puede animarse no solo al hacer scroll con el ratón, sino también con el teclado o mediante otros métodos de navegación.

5. View Transitions (Transiciones de vista)

Estas transiciones permiten realizar efectos visuales cuando una página cambia a otra, haciendo que el salto entre vistas sea fluido y visualmente atractivo.

Al hacer clic en un elemento, el navegador toma una captura antes de la transición y la combina con la nueva página, ofreciendo una experiencia continua.

Ejemplo en vivo: Live View Transitions

6. WebAnimations API (con JavaScript)

Cuando necesitas controlar el comportamiento, la duración o incluso la interacción con las animaciones en tiempo real, puedes recurrir a la API WebAnimations en JavaScript. Esta opción ofrece mayor flexibilidad y dinamismo.

javascriptCopiarEditarconst box = document.querySelector(".box");

box.animate([
  { transform: "translate(0) rotate(0deg)" },
  { transform: "translate(400px) rotate(180deg)" }
], {
  duration: 500,
  fill: "forwards"
});

Esta técnica te permite controlar cuándo inicia o termina la animación, pausarla, invertirla o modificarla durante su ejecución.