CSS スクロール駆動アニメーションについて
chrome等にて2023年頃から使えるようになったCSSの新機能
「スクロール駆動アニメーション-Scroll-driven Animations-」
未だFireFoxが完全対応していないため業務では使えませんが
今後利用できるようになればJSを使わず色々と便利に実装できるだろう。
という期待を込めて、機能を確認していきましょう。
機能の概要
機能のメインはscroll関数とview関数の利用。
scroll関数は大雑把に言えば「アニメーションの進行を時間ではなくスクロール量に変更する」
view関数は「その際に0-100%の画面範囲を指定する」と表現すればよいか。
scroll関数の利用
コード例で説明すると
.anime_back{
position: fixed;
height: 0;
top: 0;
left: 0;
animation-name: AnimeBar;
animation-duration: 11s;
}
@keyframes AnimeBar{
0%{height:0;}
100%{height:330px;}
}
このCSSはページの表示から11秒で「.anime_back」の高さが330pxに変化します。
これを
.anime_back{
position: fixed;
height: 0;
top: 0;
left: 0;
animation-name: AnimeBar;
animation-timeline: scroll(root y);
}
こうすると、ページを最下段までスクロールすると高さが330pxに変化することになります。
何にに使うの？
と問われると、例えばブログの記事の進行度バーを表現するのにJSが必要なくなる、などですね。
なおアニメーションの切り替わりはデフォルトが「ease」であるため
完全にスクロールバーと一致させるなら「animation-timing-function: linear;」をつけた方が良い。
view関数の利用
animation-timeline: view(y 10% 10%);
といった形で指定。
それぞれの意味合いはview(スクロール方向 画面の上からの距離 画面の下からの距離)であり、
3つ目の値は領域の範囲を指定するものではありません。
値は大きさを示すものなら設定可能で、
vw,vh,px,em,calc()などなんでもござれ。
マイナス値も指定できます。
注意点としては
「animation-fill-mode: forwards;」を設定しておかないと
view関数の領域を通過した後にデフォルトのスタイルに戻ることにあるでしょうか。
これは普通のanimationを設定する場合と同じ。
またバグかわからない挙動ですが、
animationのタイミングを0%～60%のように中途半端に設定した場合、
アニメーションの描画が逆転します。
本来は100%まで指定するものなので仕様か。
まとめ
以上の内容を使ったテストページを作成しました。
※FireFoxでは動作しません
これが使えるようになれば、
・スクロールにあわせてふわっと出てくるJSライブラリや
・スクロール量に合わせてデザインを変えるページ
などにjavascriptを使わなくてもいいということになります。
ふわっと出てくる方は出っ放しにできない、
デザインを変えるページはスクロール量の検出にJSが必要
といった問題がありますけども。
それでもリファレンスに書いてあるとおり、
javascriptでscrollイベントをトリガーするよりは動作が軽いようです。
ただし使いにくい点もそれなりにあり、例えば「animation-timeline-name」の指定。
animation-timelineで直近の祖先やroot以外が指定できるのは良いのですが、
指定されたnameが祖先要素に存在しないと反応しません。
つまり全く関係ないスクロールボックスを作って連動させる、
などはできないということです。
別件でセレクタのinput[value=”1″]を使ってカスタムプロパティを動的に変化させた場合も
それが適応されるのは子要素だけだったりとcssの親子関係は制限がそこそこあるのですよね。
そういったところが柔軟になるとプログラミング的な動作も出来るようになるのですが
そこはやはり動作速度とトレードオフになったりするのでしょうか。
また現段階はスクロール量に応じてアニメーションしますが、
CSS スクロール トリガー アニメーションという新しい機能も公開されました。
こちらはスクロールが画面領域内に入ったときにアニメーションを開始するもの。
Tweet