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:
scrolly.box, ambos dentro de.container. - 2️⃣ El elemento
.scrolllo ajustamos para que tenga mucho contenido y desplazamiento. - 3️⃣ Creamos una línea de tiempo con
scroll-timelineen.scroll. - 4️⃣ Le asignamos la animación
--rotate-timelineal 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 o porcentaje donde empieza a actuar el rango. | |
| 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
animationindicamos que realice la animaciónrotate. - 2️⃣ Usamos
bothpara que antes de empezar y al terminar use los fotogramas adecuados. - 3️⃣ Con
animation-timelineusamos una animación de desplazamiento. - 4️⃣ Con
animation-rangedefinimos 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.
