Crear líneas de tiempo CSS

La forma de crear animaciones asociadas a otras líneas de tiempo (o timelines) es utilizando la propiedad animation-timeline. Esta nueva propiedad de CSS nos permite asociar una animación a una línea de tiempo determinada, en lugar de asociarla al clásico @keyframes donde definimos la animación.

La propiedad animation-timeline

Los valores posibles que puede tomar la propiedad animation-timeline serían los siguientes:

Recordemos que:

• Las animaciones de duración se definen con @keyframes y se disparan al pasar un tiempo determinado.
• Las animaciones de scroll se definen con scroll() y se disparan con desplazamiento de scroll.
• Las animaciones de vista se definen con view() y se disparan al aparecer en el viewport.

Como puedes ver, mediante la propiedad animation-timeline defines la linea de tiempo o cronología que vas a utilizar. Como las líneas de tiempo basadas en @keyframes (asociadas a tiempos) ya las conocemos, vamos a centranos en la función scroll().

Animación sencilla de scroll

Vamos a empezar creando una animación anónima basada en el desplazamiento de scroll. Más adelante la explicaremos en profundidad, pero de momento usaremos una versión muy básica.

Observa el siguiente ejemplo, en el que aún no tenemos nada relacionado con animaciones de scroll. En este ejemplo tenemos una animación simple para usarla de base para el ejemplo que vendrá a continuación, donde si usaremos animaciones de scroll:

body {
  max-height: 400px;
  margin: 0;
  font-size: 6rem;
}

.container {
  background: #9994;
  width: 100%;
  height: 15px;
  position: fixed;
  top: 0;
  left: 0;
}

.bar {
  width: 0%;
  height: 100%;
  box-shadow: 0 0 5px darkred;
  background: red;
  animation: resize 5s linear forwards;
}

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

<div class="container">
  <div class="bar"></div>
</div>

<p>
  Escribe aquí un texto lo suficientemente largo como para tener scroll
  vertical y que podamos desplazarnos.
</p>

Simplemente hemos creado un texto (lo suficientemente grande como para tener scroll vertical), y hemos definido una barra de progreso .bar con fondo gris, que va incrementando en rojo su ancho durante 5 segundos. Observa que el parámetro animable es la propiedad width, que empieza en 0% y acaba en 100%.

Vamos a modificar ligeramente el ejemplo anterior, e introducir cambios en las dos últimas propiedades del elemento .bar.

Ahora, si hacemos scroll en el texto, veremos que se produce la animación de la barra de progreso, porque está siendo dirigida por scroll. Aunque estamos variando el tamaño de width, que es de las cosas más intuitivas, podríamos hacerlo con cualquier otro tipo de animación: colores, altos, movimientos, redondeo de bordes, opacidades, etc...

body {
  max-height: 400px;
  margin: 0;
  font-size: 6rem;
}

.container {
  background: #9994;
  width: 100%;
  height: 15px;
  position: fixed;
  top: 0;
  left: 0;
}

.bar {
  width: 0%;
  height: 100%;
  box-shadow: 0 0 5px darkred;
  background: red;
  animation: resize linear forwards;
  animation-timeline: scroll(root block);
}

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

<div class="container">
  <div class="bar"></div>
</div>

<p>Escribe aquí un texto lo suficientemente largo como para tener scroll vertical.</p>

¿Qué cambios hemos hecho?

• Hemos eliminado el tiempo de duración 5s, que correspondería a la propiedad animation-duration.
• Por lo tanto, la animación ha dejado de ser una animación basada en duración.
• Hemos añadido un animation-timeline con el valor scroll(root block).
• La animación ha pasado a ser una animación dirigida por scroll (más adelante profundizaremos).

En los siguientes artículos, explicaremos como funcionan las animaciones basadas en scroll y las animaciones basadas en vistas en profundidad.