Scroll-driven animations!Limited availability

@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Reading progress bar driven by page scroll */
.progress {
  transform-origin: left;
  animation: grow linear;
  animation-timeline: scroll(root);
}

@supports (animation-timeline: scroll) {
  /* styles that rely on animation-timeline: scroll */
}

/* or in JavaScript */
if (CSS.supports("animation-timeline", "scroll")) {
  // use it
}