⚠️ Browser support: Chrome 115+, Edge 115+ (experimental)

@scroll-timeline --scroll-timeline {
  source: root;
  axis: block;
}

.animated-element {
  animation: scroll-timeline-animation linear;
  animation-timeline: --scroll-timeline;
}

@keyframes scroll-timeline-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}