Scroll timeline linked animations

Ejemplos de uso de nueva media de CSS @scroll-timeline para aplicar animaciones CSS en función del Scroll de la página
Scroll timeline linked animations

Ejemplo simple sobre uso de nueva media de CSS llamada @scroll-timeline. Actualmente, 31/01/2022, todavía no está soportado por los navegadores. Para poder verlo en Chrome, con versión superior a 89, hay que habilitar las flags experimentales: "Experimental Web Platform Features" chrome://flags/#enable-experimental-web-platform-features

Enlace a caniuse.com

Recomiendo dos entradas de Bram.us, que están geniales, con ejemplos y con muchos recursos para explicarlo. Nada de lo que yo pudiera explicar igualaria estos dos enlaces :)

https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/

https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-2/

En este PEN puede verse el @scroll-timeline funcionando

En este repositorio puede verse el scroll timeline linked animations>