Tipos de animaciones

Dentro del mundo de las animaciones existen muchas diferentes, muy variadas y de diferente tipo. Sin profundizar demasiado aún, vamos a intentar entender las principales características y diferencias de cada una, para saber cuál es la más apropiada para nuestro caso y cuando nos podrían resultar mejor.

Veamos una introducción de cada una de estas temáticas.

Transiciones

Se denomina una transición a un tipo de animación muy simple, entre dos estados diferentes. Este tipo de animación se produce generalmente por una interacción del usuario con la web o un elemento de la misma, con el objetivo de suavizar el cambio de estado. Sin embargo, las animaciones, suelen buscar ser más complejas o independientes, por lo que la mayoría de las veces, suele ser más adecuado pensar en transiciones que en animaciones.

Veamos un ejemplo sencillo de transición, al mover el ratón sobre un elemento HTML:

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

  &:hover {
    background: hotpink;
  }
}

<div class="box"></div>

Al mover el ratón sobre el elemento, se activa la transición de un estado inicial (sin ratón encima) a uno final (con ratón encima). En general, si es posible, tu primera opción debería ser realizar una transición.

¿Cuándo deberíamos renunciar a las transiciones?

• Necesitas que la animación se active por si sola
• Necesitas que la animación se repita continuamente
• Necesitas transicionar por más de 2 estados diferentes
• Necesitas una animación más compleja

Animaciones

Lo que ves a continuación es una animación simple. Se trata de una animación de tres estados, que una vez termina hace el camino opuesto. Al contrario que las transiciones, las animaciones se suelen iniciar de forma automática, y en muchos casos, se repiten de forma indefinida.

Veamos un ejemplo de una animación que se empieza a reproducir de forma automática y se repite de forma infinita:

.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; }
}

<div class="box"></div>

Por simplicidad, esta animación sólo está cambiando los colores, pero tanto las transiciones como las animaciones pueden animar otros aspectos: el ancho o alto del elemento, el color o tamaño del borde, la posición donde está colocado, etc.

Sin embargo, si lo que quieres es moverlo de sitio por una ruta específica, lo ideal es echar un ojo a las animaciones del siguiente apartado.

Trayectos animados

En alguna ocasión nos puede interesar animar un elemento a través de una ruta. Esto se puede lograr mediante los trayectos animados. Este tipo de animaciones son muy sencillas de crear, y se basa en definir una ruta mediante un trayecto SVG.

Veamos un ejemplo:

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

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

<div class="box"></div>

Una vez definido el trayecto, sólo hay que animar la distancia que quieres que se desplace.

Animaciones dirigidas por scroll

Otro tipo de animaciones son las Scroll Driven Animation (Animaciones dirigidas por desplazamiento). Estas animaciones se basan en el scroll realizado por el usuario a lo largo de la página o de una región concreta. Observa el siguiente ejemplo, donde incrementamos o decrementamos la barra amarilla dependiendo del scroll realizado:

body {
  margin: 0;
  height: 200px;
}

section.page {
  height: 100vh;
  color: white;
  background: color-mix(in srgb, indigo, black var(--dark));
}

.page-1 { --dark: 0% }
.page-2 { --dark: 25% }
.page-3 { --dark: 50% }
.page-4 { --dark: 75% }

.indicator {
  background: grey;
  width: 100px;
  height: 25px;
  position: fixed;
  top: 25px;
  right: 50px;

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

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

<section class="page page-1">Página 1</section>
<section class="page page-2">Página 2</section>
<section class="page page-3">Página 3</section>
<section class="page page-4">Página 4</section>
<div class="indicator"><div class="bar"></div></div>

Ten en cuenta que el desplazamiento de la página no es necesario realizarlo expresamente mediante ratón. Por ejemplo, mediante teclado (Avanzar página, espacio o cursores) también serviría.

View Transition

Las View Transition (Transiciones de vista) son un tipo de animación que se produce al realizar un cambio de página. El navegador toma una captura del aspecto visual antes de cambiar de página, la congela y realizar el cambio a la otra página. Una vez en la otra página, realiza una transición suave hacia la nueva página.

De esta forma, las animaciones mostradas son muy agradables, y simulan ser instantáneas aunque realmente estén recargando toda la página.

Puedes ver un ejemplo en esta URL, observa que al hacer click en las cards, la URL del navegador está cambiando (aunque no lo parezca): https://live-transitions.pages.dev/

WebAnimations

Por último, las WebAnimations son una forma de realizar animaciones a través de Javascript, lo que nos proporciona mucho más control sobre ellas. Esta modalidad de animaciones, simplemente crea una animación CSS y la ejecuta. Sin embargo, tenemos más control para detectar cuando terminan las iteraciones, cuando finaliza la animación, utilizar el dinamismo de Javascript para modificar o alterar la animación, etc.

Observa el siguiente ejemplo creado con WebAnimations:

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

const KEYFRAMES = [
  { "transform": "translate(0) rotate(0)" },
  { "transform": "translate(400px) rotate(180deg)" }
];

const OPTIONS = {
  duration: 500,
  fill: "forwards"
};

box.animate(KEYFRAMES, OPTIONS);

.box {
  width: 100px;
  height: 100px;
  background: indigo;
}

<div class="box"></div>

En los siguientes artículos veremos más en profundidad cada uno de estos tipos de animaciones.