I want a CSS pseudo-selector for elements that are in the viewport

The kind of effects this can help with are currently done with an IntersectionObserver, but it would be nice if style changes could stay in CSS. Maybe a :in-viewport (and :seen) selector. A use case would be animating titles onto the page when the user scrolls down to it:

h2 {
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity transform;
}
h2:in-viewport {
  opacity: 1;
  transform: translateX(0);
}
h2.stay-visible-after-animating:seen {
  opacity: 1;
  transform: translateX(0);
}