HTMLとCSSでページ内リンクをクリックでジャンプ先をアニメーション表示させる

ページ内リンクをクリックしたときにジャンプ先の背景色をアニメーションさせて分かりやすくする演出の方法です。

<a href="#jump">ページ内リンク</a>

...
...
...

<p id="jump">あのイーハトーヴォの...</p>

まずは、ページ内リンクをマークアップします。

html {
  scroll-behavior: smooth;
}

html 要素に scroll-behavior: smooth; を指定してページ内リンクをクリックしたときにスムーススクロールされるようにしておきます。

@keyframes highlight {
  0% {
    background-color: #fceb70;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes を使ってアニメーションを定義します。今回は、黄色の背景色から透明になるアニメーションにします。

#jump:target {
  animation: highlight 2.4s ease-in-out;
}

ページ内リンクがクリックされたときは擬似クラス :target が発火するので、そのタイミングで animation プロパティを使って先ほどのアニメーションを指定します。

CodePen ですべてのソースコードと実際の動作を確認できます。