Cuando profundizamos en el mundo de las animaciones, existen ciertos tipos de animaciones que requieren sincronizarse con el usuario cuando realiza scroll (desplazamiento) en una página.
Este tipo de animaciones, donde se incluyen efectos como parallax, zoom, movimientos, aparición/desaparición, o en definitiva, animaciones específicas dirigidas por scroll, eran muy complejas de realizar hasta ahora, ya que requerían Javascript y podían ser altamente costosas o ineficientes, dependiendo de como se realizaran.
CSS ha añadido una serie de propiedades relacionadas que permiten generar este tipo de animaciones de forma muy sencilla, utilizando CSS. Pero antes, debemos aprender algunos conceptos clave que usaremos en este artículo.
¿Qué es un Timeline?
Las líneas de tiempo (timelines) aparecen en CSS con las animaciones. Como su propio nombre indica, se trata de un concepto para medir el tiempo de una animación, que parte desde un punto inicial, hasta un momento actual o final.
Observa que estas líneas de tiempo representan un momento actual que va desde 0 hasta 1 y que dicho número determina el momento de la animación donde nos encontramos.
El usuario podría pensar que las líneas de tiempo son un añadido que aparece ahora en CSS, sin embargo, siempre han existido, pero ahora podemos definirlas desde CSS de forma explícita.
Tipos de líneas de tiempo
Con la llegada de las animaciones dirigidas por scroll o desplazamiento, comenzamos a tener varios tipos de líneas de tiempo, así que vamos a mencionarlas todas:
-
⌛ Las líneas de tiempo de duración: Son aquellas que permiten crear una animación a lo largo del tiempo o una duración específica. Defines lo que ocurre en momentos concretos del tiempo.
-
🐭 Las líneas de tiempo de scroll: Son aquellas que permiten realizar una animación cuando el usuario realiza desplazamiento en una página o región de la página. Defines lo que ocurre cuando llegas a un porcentaje de desplazamiento concreto.
-
💠 Las líneas de tiempo de vistas: Son aquellas que permiten realizar una animación cuando los elementos son visibles en la región visible del navegador (viewport). Defines lo que ocurre cuando están en un porcentaje de aparición visual específico.
Para gestionar estas líneas de tiempo, utilizaremos la nueva propiedad CSS llamada animation-timeline, con la que determinaremos que tipo de línea de tiempo vamos a usar.
Es importante tener en cuenta que cuando hablamos de scroll no nos referimos unicamente a scroll de ratón. Pulsar AvPag, Espacio, ↓ o mover la barra de desplazamiento también produce un scroll o desplazamiento, independientemente de que usemos el ratón.
