Scroll animations have been a thing on the web for a long time. Apple uses them extensively whenever they launch a new product.

Up until now, you had to rely on JavaScript to achieve this—specifically the Intersection Observer API. With the new animation-timeline property, you can achieve the same effect with CSS alone.

What this property allows you to do is to sync your animation with the scroll state of the page or of a single element.

.element {
  animation: appear linear;
  animation-timeline: scroll(root block);
}

Check the links below for a more in-depth explanation of how this works.