IMPORTANTE: La especificación Scroll-Linked Animations y su sintaxis propuesta han sufrido una reescritura importante. Esta entrada utiliza una versión anterior de la sintaxis y no se ha actualizado para reflejar estos cambios.
👉 Para obtener una la nueva especificación y sintaxis recomiendo visitar esta publicación de Bramus Van Damme: https://scroll-driven-animations.style/demos/image-reveal/css/
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>