Webサイトで、スクロールに合わせて要素が表示されるアニメーションを見かけたことはありませんか？

こうした演出はJavaScriptで実装されることが多いですが、Scroll-driven Animations を使えば、CSSだけで実装できます。

今回は、要素が画面内に入ったタイミングで表示されるシンプルなアニメーションを例に、基本的な使い方を紹介します。

Scroll-driven Animationsとは？

Scroll-driven Animationsは、スクロールを基準にアニメーションを制御できるCSSの機能です。
通常のCSSアニメーションは時間を基準に動きますが、Scroll-driven Animationsではスクロール量や要素の表示位置に応じてアニメーションが進みます。

Scroll-driven Animationsの種類

Scroll-driven Animationsでは、アニメーションの進み具合を決める「タイムライン」が用意されており、主に2種類あります。

1. View Progress Timeline（view()）

要素が画面内に入ってから出るまでを基準にアニメーションを進めます。
今回の記事で使うのがこちら。

animation-timeline: view();

例えば、

• 要素のフェードイン
• 左右や上下からスライドして表示
• 拡大・縮小しながら表示といった、「要素が見えたらアニメーションする」演出によく使われます。

2. Scroll Progress Timeline（scroll()）

ページ全体やスクロールコンテナのスクロール量を基準にアニメーションを進めます。

animation-timeline: scroll();

例えば、

• ページ上部のプログレスバー
• スクロール量に応じた画像の拡大・縮小
• パララックス風の演出
• スクロール量に応じて要素を回転させるといった、スクロール位置そのものに連動する演出で使われます。

実際に作ってみる

今回は、要素が画面内に入るタイミングで、表示されるアニメーションを作ってみます。

このようにスクロールすると、要素が画面内に入るタイミングでアニメーションが実行されます。

今回のスクロールアニメーションは、主に次の4つのコードで実装しています。

• animation
  実行するアニメーション（show）を指定します。
• animation-timeline: view();
  スクロールに合わせてアニメーションを動かすための指定です。通常はJavaScriptでスクロール位置を取得する必要がありますが、view()を指定することで、CSSだけでスクロールに連動したアニメーションを実装できます。
• animation-range
  アニメーションを開始・終了するタイミングを指定します。今回は entry 10% cover 60% を指定しているため、要素が画面内に10%入ったあたりからアニメーションが始まり、60%表示される頃に完了します。
• @keyframes
  アニメーションの動きを定義します。今回は opacity で透明度を、transform で位置や拡大率を変更し、左・右・上から表示されるアニメーションを設定しています。

今までと何が違う？

これまではJavaScriptでスクロール位置を取得し、表示・非表示を切り替える実装がよく使われていました。

一方、Scroll-driven Animationsを使えば、シンプルなスクロールアニメーションならCSSだけで実装できます。

JavaScriptでスクロールイベントを監視する必要がないため、コード量が少なく、管理しやすいのも魅力です。

注意点

まだ新しい仕様のため、利用する際はブラウザの対応状況を確認しましょう。

また、複雑な条件分岐や細かな制御が必要な場合は、JavaScriptのほうが適しています。

まとめ

Scroll-driven Animationsを使うと、スクロールに合わせたアニメーションをシンプルなCSSだけで実装できます。

まずは今回のようなフェードインやスライドインから試してみると、基本的な使い方が分かりやすいと思います。

慣れてきたら、プログレスバーやパララックス風の演出などにも挑戦してみてください。