CSSの新機能「animation-timeline」をGoogleChrome以外のブラウザで動作させる方法

やべえツールを作っちまいました。 先日、animation-timelineがGoogleChromeに実装されたとのことで、他のブログサイトで盛り上がっていたんで、自分でも試しに使ってみたら、なんとまあ使いやすい機能だこと。 でも、これって、GoogleChromeオンリー機能（Edgeは遅れて対応しているみたいだけど）のようです。（2023年９月の現時点での話） この機能、あまりにも便利だと思ったので、safariでもfirefoxでも、何なら他の大体のwebブラウザで動かすことができるような、ラッピングツールを作ってやろうじゃないかと思って、仕事で忙しい最中に、丸一日使って作り上げてしまいました。

animation-timelineについて

ネットでググれば、優しく解説してくれているサイトが、ゴマンと出てくると思いますが、簡単に解説すると、 これまで、ライブラリを使ってプログラミングとして書いていたページのスクロールアニメーションを、いとも簡単にcssだけで実装できてしまうのが、このanimation-timeline機能です。

デモ

※GoogleChromeだけ下記の枠内がスクロールに応じて変化します。

どんな事ができるの？

この機能で使っている、scroll()という設定は、ページのスクロールの値を0%~100%として、@keyframesのアニメーションと連動させることができる命令です。 縦スクロールのページで、横にスクロールバーを設置したり、スクロール位置に応じた色々なスタイルシートの変更ができてしまうので、かなり画期的な機能です。

リファレンスサイト

mdn web docs : animation-timeline

解説ページ

https://ics.media/entry/230718/ こちらのページにサンプル多めでわかりやすく、見やすく解説されています。

他のブラウザで動かす方法

さて、ここからが本題ですが、この機能を、GoogleChromeブラウザだけでしか使えないのって非常に悔しい限りです。 そもそも、safariで使えないというのは、iPhoneで動作しないので、ほとんどのwebページ制作で使えないという事になります。 ということで、急遽他のブラウザでも動かすことができるライブラリを作りました。 githubにpushしてます。

Githubリンク

https://github.com/yugeta/animation_timeline 簡単なデモページも作ってあります。 https://yugeta.github.io/animation_timeline/sample/

使い方

他のブラウザでどうやって動かせば良いのかの前に、どうやったら簡単な設定になるのかにこだわってみました。 そして行き着いた設定方法は、以下の動作だけで、GoogleChromeと同じ動きになるようにしてみました。（現在機能が限定的ですが、今後機能追加していく予定です。OSS参加希望者求む）

1. githubからcloneする
2. src/animation_timeline.js を読み込む
3. cssに１行追記する

1. githubからcloneする git clone https://github.com/yugeta/animation_timeline 2. src/animation_timeline.js を読み込む jsのtype="module"で使うことができます。 たぶんnodejsでも使えます。 import { AnimationTimeline } from '../src/animation_timeline.js' new AnimationTimeline() 3. cssに１行追記する - before animation-timeline:scroll(); 上記の設定をしている箇所を次のように追記してください。 - after animation-timeline:scroll(); --animation-timeline:scroll(); プロパティ変数として登録するとそれを自動的に拾うようにしています。

注意点

・GoogleChromeで動くことを確認してから上記設定を行ってください。 ・すべての機能がトランスレートされないので、機能要望があれば、プルリクまたはこのブログのコメントなどでお伝え下さい。

今後の展開

スクロールライブラリを使わなくても良いようになる、この機能、他のブラウザが対応するまでどのくらいの期間がかかるかわかりませんが、 それまでの間、便利に使えるツールとして、広まってくれればいいな〜と思って作ってみました。 ていうか、自分で使い倒します。 ホームページ制作でこういう機能を入れると、クライアントさんが喜ぶんですよね。 @scroll-timelineに対応できていないので、まずはこれの対応を早急に行おうと思っています。

あとがき

他にも欲しい（作りたい）ツールが山ほどあるので、似たような形で、マルチブラウザハッキングを行っていきたいですね。 ちなみに、まずは、Firefoxのhas()対応ですかね。 このツールに共感して貰える人、色々コメントくださいませ。