10月27日に公開されたFirefox 159で、CSSのスクロール駆動アニメーション(scroll-driven animations)が既定で有効になりました。MDNの開発者向けリリースノートで、CSSの項目の筆頭に挙げられている変更です。ページを読み進めるのに合わせて要素が動く、あの演出をJavaScriptなしで書ける仕組みが、Firefoxの利用者にもそのまま届くようになります。

スクロールに合わせた演出は、企業サイトや採用サイトのトップでよく求められるものです。これまではスクロール位置を監視するスクリプトやライブラリに頼ることが多く、軽さや保守のしやすさとの綱引きになりがちでした。今回の変更で、CSSだけで組む選択肢がぐっと現実的になったと感じています。

時間ではなくスクロール量で進むアニメーション

通常のCSSアニメーションは、文書のタイムライン、つまり時間の経過に沿って再生されます。MDNの解説によると、スクロール駆動アニメーションはこの基準を時間からスクロールに置き換えるもので、要素そのもの、そのスクロールコンテナ、あるいはページ全体のスクロールに合わせて値を変化させられるとされています。

指定のしかたは大きく分けて二通りです。ひとつは scroll-timeline でスクロールする側に名前を付け、動かしたい要素の animation-timeline でその名前を指す方法。もうひとつは scroll() や view() といった関数を animation-timeline に直接書く方法です。たとえば animation-timeline: scroll(nearest inline); と書けば、いちばん近いスクロールコンテナの横方向のスクロールに合わせて進みます。

キーフレームは従来どおり @keyframes で書けるので、既存のアニメーションの知識がそのまま生きます。違うのは「何秒かけて」ではなく「どこからどこまでスクロールする間に」という考え方になる点です。表示範囲を細かく決めたいときは animation-range や view-timeline-inset で調整できます。

制作の現場で効きそうな場面

使いどころとして分かりやすいのは、記事ページ上部の読了バー、見出しや画像が画面に入ったときのふわっとした表示、横スクロールの事例紹介での背景色の変化などです。どれもこれまではスクロールのイベントを拾うスクリプトで作ることが多かったものです。

CSSで書けるようになると、読み込むスクリプトが減り、メイン処理の負担も軽くなります。中小企業のサイトでは、演出のためだけに大きなライブラリを入れていて、表示の速さを損ねている例も少なくありません。WordPressのテーマに組み込む場合も、プラグインを増やさずに子テーマのCSSで完結させやすくなります。

ただし、全員の環境で動く前提にはしないほうが安心です。MDNのデモでも @supports not (scroll-timeline: --main-timeline) で未対応のブラウザを判定し、案内を出す書き方が示されています。演出が動かなくても内容は普通に読める、という作りを基本にしておくと、閲覧環境の差を気にせず取り入れられます。動きが苦手な方への配慮として、prefers-reduced-motion で控えめにする指定も合わせて入れておきたいところです。

同じ版で入ったほかの変更

Firefox 159では、ほかにも制作者に関わる変更がいくつかあります。HTML Sanitizer APIを使う Element.setHTML() などのメソッドは、マークアップを読み取りながら不要な要素や属性を取り除く方式に変わりました。リリースノートでは結果は同じとされていますが、隣り合うテキストがひとつのテキストノードにまとまるようになった点は、DOMを細かく扱う処理では念のため確かめておくとよさそうです。

また、試験的に用意されていた石積み状のレイアウト(masonry)の古い書き方が削除されました。これは以前からNightlyでのみ既定で有効だったもので、今後は display の grid-lanes と inline-grid-lanes を使う新しい書き方に置き換わります。古い構文で試作したコードが手元にあれば、書き換えの対象として覚えておくとよいでしょう。

取り入れるときの進め方

Chromeでは2023年の時点で紹介記事が出ており、今回Firefoxが既定で有効になったことで、主要なブラウザの多くで同じ書き方が通る場面が増えてきました。いきなりサイト全体の演出を置き換えるより、まずは読了バーのような小さな部品で試し、スクリプト版との見た目や動きの差を確かめるのが手堅い進め方です。

私たちも、これまでスクリプトで組んでいたスクロール演出のうち、CSSに移せるものから順に見直していくつもりです。軽くて壊れにくい演出が標準の機能で書けるようになるのは、長くサイトを運用していくうえで素直にうれしい変化です。