Control de líneas de tiempo

Ahora que ya sabemos crear líneas de tiempo en CSS, ampliando a animaciones basadas en desplazamiento de scroll o regiones visibles del navegador, vamos a comentar una serie de propiedades que nos permiten ajustar detalles de las líneas de tiempo, y que nos pueden venir muy bien para gestionar la forma en que funcionan.

La propiedad `timeline-scope`

Mediante la propiedad timeline-scope podemos delimitar a que ámbito se aplica una animación de scroll/vista con nombre.

Las lineas de tiempo pueden estar definidas en un elemento concreto y no ser alcanzables en otras zonas. Con la propiedad timeline-scope, se puede redefinir el ámbito (scope) de la línea de tiempo indicada para que abarque no sólo el contenedor donde se definió, sino el elemento donde se aplica el timeline-scope y todos sus descendientes.

Propiedad	Descripción
`timeline-scope`	Amplía el alcance de una línea de tiempo al elemento actual y sus descendientes.

Veamos un ejemplo en funcionamiento. Observa los siguientes detalles:

1️⃣ Tenemos dos elementos: scroll y .box, ambos dentro de .container.
2️⃣ El elemento .scroll lo ajustamos para que tenga mucho contenido y desplazamiento.
3️⃣ Creamos una línea de tiempo con scroll-timeline en .scroll.
4️⃣ Le asignamos la animación --rotate-timeline al elemento .box.

body {
  max-height: 200px;
  timeline-scope: --rotate-timeline;
}

.scroll {
  background: grey;
  width: 90%;
  height: 150px;
  font-size: 8rem;
  overflow: hidden scroll;
  scroll-timeline: --rotate-timeline;
}

.box {
  width: 75px;
  height: 75px;
  background: indigo;
  position: fixed;
  top: 1rem;
  right: 1rem;
  animation: rotate linear both;
  animation-timeline: --rotate-timeline;
}

@keyframes rotate {
  from { rotate: 0deg; opacity: 1; }
  to { rotate: 360deg; opacity: 0; }
}

<div class="container">
  <div class="box"></div>
  <div class="scroll">
    Esto es una prueba con mucho contenido de texto
    para crear desplazamiento.
  </div>
</div>

Como puedes ver, aquí podríamos tener un problema. La línea de tiempo --rotate-timeline sólo existe dentro del elemento .scroll, por lo que ciertas partes del documento no pueden hacer referencia a ella porque no la conocen. Así que le hemos puesto solución mediante timeline-scope, con el que hemos ampliado el ámbito de la línea de tiempo --rotate-timeline al elemento <body> y sus descendientes.

Por defecto, timeline-scope usa el valor none, pero también es posible usar all.

La propiedad `animation-range`

Mediante la propiedad CSS animation-range podemos definir un rango donde empieza a funcionar una animación basada en scroll. Se trata de una forma de ajustar el rango donde actua para hacerla aún más precisa.

Observa la siguiente tabla, donde puedes indicar el rango inicial, el rango final y una última propiedad que es la propiedad de atajo por si queremos utilizarla en lugar de las dos anteriores:

Propiedad	Descripción
`animation-range-start`	Define el rango en el que empieza a actuar la animación.
`animation-range-end`	Define el rango en el que termina de actuar la animación.
`animation-range`	Propiedad de atajo que incluye las dos anteriores.

Cada una de las dos primeras propiedades (las propiedades individuales) permiten indicar el rango concreto utilizando uno de estos formatos:

Valor	Descripción
`normal`	Realiza la animación utilizando el rango por defecto.
tamaño	Tamaño o porcentaje donde empieza a actuar el rango.
nombre tamaño	Indica un nombre de rango (opcional) y su tamaño.

Veamos todo esto en funcionamiento en el siguiente ejemplo:

body {
  max-height: 150px;
}

p {
  font-size: 8rem;
}

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: deeppink;
}

.box {
  animation: rotate both;
  animation-timeline: scroll();
  animation-range-start: entry 30%;
  animation-range-end: exit 70%;
  /* animation-range: entry 30% exit 70%; */
}

@keyframes rotate {
  from { opacity: 1; rotate: 0; }
  to { opacity: 0; rotate: 360deg;  }
}

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

<p>
  Esto es un mensaje largo para añadir una barra
  de desplazamiento y poder usar animaciones de desplazamiento.
</p>

Observa lo que hemos hecho en este ejemplo, en el elemento .box:

1️⃣ Con animation indicamos que realice la animación rotate.
2️⃣ Usamos both para que antes de empezar y al terminar use los fotogramas adecuados.
3️⃣ Con animation-timeline usamos una animación de desplazamiento.
4️⃣ Con animation-range definimos cuando empieza a actuar y cuando termina la animación.

Ten en cuenta que puedes usar tanto las propiedades individuales, como el atajo animation-range comentado en el ejemplo.