Result

スクロールするとテキストにアニメーションしながらハイライトする、というもの。

通常のハイライトよりも目を惹く印象です。コードはVanillaとなっています。

JavaScript

(function (document) {
  const markers = [...document.querySelectorAll('mark')];
  
  const observer = new IntersectionObserver(entries => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        entry.target.style.animationPlayState = 'running';
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.8
  });
  
  markers.forEach(mark => {
    observer.observe(mark);
  });
})(document);

Intersection Observer APIで要素に交差したらイベントが発火するようになってます。

css

mark {
  --color1: springgreen;
  --color2: springgreen;
  --bg-height: 40%;
  all: unset;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
          animation: highlight 800ms 1 ease-out;
          animation-fill-mode: forwards;
          animation-play-state: paused;
}


@-webkit-keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}


@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

ハイライトのスタイリングです。

html

<p>経済面では、日本の株式上場企業の本社のほとんどが東京に集中し、（東京圏では）購買力平価（PPP）を基にしても東京都市圏のGDPは1兆5369億ドル（2014年）であり、<mark>世界的な経済都市であり、大消費地でもある。 </mark></p>

あとは任意のテキストを交差ポイントに指定すれば完成です。

via

Mark text effect on scroll w/ IO