Scroll-Driven Animations in CSS

/* Animate as the page scrolls (root scroller) */
@keyframes progress {
  to { width: 100%; }
}
.progress-bar {
  animation: progress linear;
  animation-timeline: scroll();    /* drive from page scroll */
}

/* Animate based on element entering the viewport */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card {
  animation: fade-in linear both;
  animation-timeline: view();      /* drive from element's own view progress */
  animation-range: entry 0% cover 30%;
}