【CSS】スクロールに合わせたアニメーションが作れる「スクロール駆動アニメーション」とは？

はじめに

みなさんは「スクロール駆動アニメーション」を知っていますか？

スクロール駆動アニメーションは、Chrome115でリリースされた、CSSだけでスクロールに合わせたアニメーションが作れるようになるプロパティです。

今までは、JavaScriptなどを駆使して、スクロールアニメーションを作っていましたが、
スクロール駆動アニメーションを使うことで、簡単にスクロールアニメーションを作れるようになります。

この記事では、そんなスクロール駆動アニメーションの基本的な使い方・プロパティについて解説します。

スクロール駆動アニメーション

スクロール駆動アニメーションは、SSだけでスクロールに合わせたアニメーションが作れるようになるプロパティです。
スクロール駆動アニメーションには、2種類のアニメーションタイムラインが定義されています。

01. Scroll Progress Timeline

Scroll Progress Timelineは、スクロールできるコンテナー内のスクロール位置によって、アニメーションを指定できるタイムラインです。

上記の画像のように、開始スクロール位置を0%、終了スクロール位置を100%として、アニメーションが動きます。

サンプル

このサンプルでは、スクロール位置に合わせて、X軸方向のscaleを、0.5 から 1 へアニメーションします。

See the Pen Scroll Driven Animations - sample 01 by でぐぅー | Qiita (@sp_degu) on CodePen.

基本的な使い方

Scroll Progress Timelineの基本的な使い方は、アニメーションさせたい要素の animation-timeline に scroll() 関数を使い、animation に @keyframes を指定するだけです。

scroll()

scroll(<scroller> <axis>)

ref: scroll() - MDN

scroll() は引数に <scroller> と <axis> を受け取ることができ、上記のように指定することができます。

• scroller：スクロールする基準を決める値 （省略可）
  • nearest：最も近いスクロールする先祖要素を基準にする （デフォルト）
  • root：ドキュメントビューポートを基準にする
  • self：指定した要素自体を基準にする
• axis：スクロール方向を決める値 （省略可）
  • block：ブロック方向のスクロールを基準にする （デフォルト）
  • inline：インライン方向のスクロールを基準にする
  • y：y軸方向のスクロールを基準にする
  • x：x軸方向のスクロールを基準にする

　
具体的に scroll() を使うと以下のようなCSSになります。

sample.css

@keyframes scroll-anim {
  from { scale: 0.5 1; }
  to { scale: 1 1; }
}

.inner {
  animation: scroll-anim linear;
  animation-timeline: scroll();
}

※ @keyframesでは、from / to だけでなく、パーセント%での指定もできます。
※ イージングは、linear 以外も使うことが可能です。

02. View Progress Timeline

View Progress Timelineは、スクロールできるコンテナーのスクロールポートを基準としてアニメーションを指定できるタイムラインです。

基準となるアニメーション範囲は、以下の種類があります。

① cover
cover は、スクロールポートの全範囲がアニメーション範囲になります。
そのため、要素がスクロールポートに1px以上入ってから、要素が完全に出るまでアニメーションします。

② entry
entry は、スクロールポートに要素が見える範囲がアニメーション範囲になります。
そのため、要素がスクロールポートに1px以上入ってから、全要素が見えるようになるまでアニメーションします。

③ exit
exit は、スクロールポートに要素が見えなくなる範囲がアニメーション範囲になります。
そのため、要素がスクロールポートに1px以上出てから、全要素が見えなくなるまでアニメーションします。

④ entry-crossing
entry-crossing は、スクロールポートの終了境界エッジを横切っている範囲がアニメーション範囲になります。
そのため、スクロールコンテナーの終了境界エッジを要素が重なり始めてから、終わるまでアニメーションします。

⑤ exit-crossing
exit-crossing は、スクロールポートの開始境界エッジを横切っている範囲がアニメーション範囲になります。
そのため、スクロールコンテナーの開始境界エッジを要素が重なり始めてから、終わるまでアニメーションします。

⑥ contain
contain は、要素がスクロールポートに入っている範囲がアニメーション範囲になります。
そのため、全要素がスクロールポート内に入ってから、要素がで始めるまでアニメーションします。

サンプル

このサンプルでは、基準となるスクロール範囲に合わせて、widthをアニメーションします。

• cover → widthを、50% から 100% へアニメーションします。
• entry → widthを、50% から 100% へアニメーションします。
• exit → widthを、100% から 50% へアニメーションします。
• entry-crossing → widthを、50% から 100% へアニメーションします。
• exit-crossing → widthを、100% から 50% へアニメーションします。
• contain → widthを、100% から 50% へアニメーションします。

See the Pen Scroll Progress Timeline by でぐぅー | Qiita (@sp_degu) on CodePen.

基本的な使い方

View Progress Timelineの基本的な使い方は、アニメーションさせたい要素の animation-timeline に view() 関数を使い、animation-range でアニメーションの範囲を決め、animation に @keyframes を指定するだけです。

view()

view(<axis> <view-timeline-inset>)

ref: view() - MDN

view() は引数に <axis> と <view-timeline-inset> を受け取ることができ、上記のように指定することができます。

• axis：スクロール方向を決める値 （省略可）
  • block：ブロック方向のスクロールを基準にする （デフォルト）
  • inline：インライン方向のスクロールを基準にする
  • y：y軸方向のスクロールを基準にする
  • x：x軸方向のスクロールを基準にする
• view-timeline-inset：要素のアニメーションを調整するオフセット値 （省略可）
  • <length-percentage>：インセット値を1~2つ指定できる （デフォルト: auto）
    • auto, 50px, 25%, 3rem, etc.

animation-range

animation-range: entry 0% entry 100%;

ref: animation-range - MDN

animation-range プロパティは、上記のようにスクロールアニメーションがスタートする位置・終了する位置とアニメーション範囲を指定することができます。

細かい指定は、↓こちらのscroll-driven-animationsジェネレーターを触りながら、調整するのがわかりやすいと思います。

具体的に view() と animation-rangeを以下のようなCSSになります。

sample.css

@keyframes scroll-anim {
  from { width: 50%; }
  to { width: 100%; }
}

.inner {
  animation: scroll-anim linear;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}

※ @keyframesでは、from / to だけでなく、パーセント%での指定もできます。
※ イージングは、linear 以外も使うことが可能です。

まとめ

この記事では、Chrome115でリリースされた、CSSだけでスクロールに合わせたアニメーションが作れるようになるスクロール駆動アニメーションについて解説しました。
スクロール駆動アニメーションは、CSSだけでスクロールに合わせたアニメーションを制御できる素晴らしく、待ちに待ったプロパティです。

具体的なサンプルコードも載せているので、ぜひ試してみてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。