CSSのみでスクロール時にテキストのハイライトやマーカー風の下線のアニメーションを実装する方法

CSSのみでスクロール時にテキストのハイライトやマーカーのアニメーションを実装する方法

Webページのコンテンツで関心を引かせたり効果的に情報を伝える場合には、そのコンテンツを強調させることが必要になります。

CSSでは、様々なアニメーション関連のプロパティを使うことで、CSSのみでWebページのスクロール時に関心を引かせたいテキストコンテンツに、アニメーション効果を加えてハイライト表示させることができます。

HTMLでもmark要素を使うだけでもテキストをハイライト表示することができますが、スクロールでコンテンツを閲覧している中でのアニメーションは、ユーザーの目を引かせるのにとても効果的でしょう。

ここでは、CSSのみでスクロール時にテキストのハイライトやマーカーのアニメーションを実装する方法についてご紹介します。

アニメーションでテキストをハイライト表示

動作確認のサンプルとして、以下のような簡単なHTML構造を用意します。

HTML

<section>
  <h2>Headline</h2>
  <p>テキスト... テキスト... テキスト... </p>
  <p>テキスト... テキスト... テキスト... </p>
  <p>テキスト... テキスト... <mark class="scroll-highlight">ハイライトテキスト</mark> テキスト... テキスト...</p>
  <p>テキスト... テキスト... テキスト... </p>
  <p>テキスト... テキスト... テキスト... </p>
  <p>テキスト... テキスト... <mark class="scroll-highlight">ハイライトテキスト</mark> テキスト... テキスト...</p>
  <p>テキスト... テキスト... テキスト... </p>
</section>

実際に実装して確認される際は、コンテンツをスクロールして表示できるよう、長めの文章を入れてください。

ハイライト表示する部分の構文は、一部分をグルーピングするspan要素や重要性のある文字列とするstrong要素ではなく、関心を引く文字列としてマークするmark要素を使うのが適切でしょう。

続いてCSS。
ハイライト表示する部分のスタイルに、background-imageプロパティで色を指定することで、@keyframesでbackground-sizeプロパティでのアニメーションが可能となります。mark要素はデフォルトで背景色が指定されているので、background-colorプロパティをtransparentで透明にしておきます。

CSS

section {
  max-width: 800px;
  margin: 0.625rem auto;
  padding: 2rem 0;
}

h2 {
  text-align: center;
  margin: 1.25rem 0 2rem;
}

p {
  margin: 0 0 1.25rem;
}

.scroll-highlight {
  background-size: 0 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: linear-gradient(#ff84d6, #ff84d6);
  animation: mark-animation linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timeline: view();
  animation-range: contain 5% contain 25%;
}

@keyframes mark-animation {
  0% {
    background-size: 0 100%;
  }
  100% {
    background-size: 100% 100%;
  }
}

animetionプロパティでアニメーションを実装する中で、animation-timelineプロパティを使って要素が表示領域に入った時点からアニメーションを進行させます。そしてそのアニメーションを実装する範囲を、animation-rangeプロパティを使って適用範囲の先頭と末尾を設定します。
animation-rangeプロパティでは、containでスクロールポートのビュー進行状況の可視範囲に完全に収まっている時に、5%表示された部分から25%まででアニメーションを実装するようにしています。
animation-fill-modeプロパティでは、アニメーションの実行後にハイライトのスタイルを保持するようにforwardsを指定しておきます。

@keyframesのアニメーションはシンプルに、background-sizeの2つの値の設定のうち、1つ目の値の幅を0%からアニメーション終了時に100％となるように設定します。

蛍光ペン風のマーカーのアニメーション

background-imageプロパティでの色の指定でlinear-gradient関数を使っていますので、書体の下部分だけをハイライトした蛍光ペン風のマーカーのスタイルにもできます。

開始点の色をtransparentで透明とし、グラデーションの長さは同じ60%とします。

CSS

.scroll-highlight {
  background-size: 0 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: linear-gradient(transparent 60%, #ff84d6 60%);
  animation: mark-animation linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timeline: view();
  animation-range: contain 5% contain 25%;
}

@keyframes mark-animation {
  0% {
    background-size: 0 100%;
  }
  100% {
    background-size: 100% 100%;
  }
}

以下、ここまでの実装の動作になります。
動画（3分10秒）

animation-timelineプロパティとanimation-rangeプロパティについては、Webブラウザのサポート状況に注意してください。
2024年4月現在は、SafariやFirefoxでサポートされていません。
サポートされていないブラウザでは、ハイライトのスタイルは適用されていますがアニメーションが実装されません。

以下のリンクからサポート状況が確認できます。

Can I use（animation-timeline）
https://caniuse.com/?search=animation-timeline

Can I use（animation-range）
https://caniuse.com/?search=animation-range

CSSでもスクロールアニメーションが実装できるようになってきましたが、すべてのWebブラウザでアニメーションさせたい場合は、まだJavaScriptで実装する必要があります。

JavaScriptを使った実装方法については、以下の記事のスクロール時の下線アニメーションの項目でご紹介しています。