CSSアニメーションの時代は終わっていた

開発しているプログラムのCSSアニメーションを全部「Web Animations API（WAAPI）」に換装したのだが、これがものすごくよかった。JavaScriptコードを書ける人はもうCSSアニメーションを使っていない説あるぞ。冗談じゃなく。

いやーさすが最近のJavaScriptはスゲーな！とか思って調べたら、CSS-Tricksの2017年の記事がヒット。何周遅れどころかレース終わってた。

以前からWAAPI自体は知っていたのだが、ちょっと面倒くさそうな印象があって避けていた。なぜそういう印象を持っていたのか、今回使ってみてわかった。インスタンスを2つ作らないといけないからだ。

なんだかレベルの低さを暗示しているようで恥ずかしい。

const keyframeeffect = new KeyframeEffect(element, keyframes, option);
const animation = new Animation(keyframeeffect);
animation.play();

でも考えてみればこれはCSSと同じなのだ。CSSアニメーションでも@keyframesとanimationを定義するだろう。逆に@keyframesとanimationの記述がなくなるからCSSはすっきりするし、JavaScriptのコードを書きながらCSSとにらめっこしなくてよくなる。

そうそう、ほとんどJavaScriptだけで完結できるところがいいのだ。なのでWAAPIは動的に生成される要素との相性が抜群にいい。その例として、簡易的なモーダルウィンドウを生成して表示してみる。

モーダル要素を挿入→モーダルが開くアニメーション→子要素を挿入→コンテンツを表示するアニメーション、のように、一連の処理の中に自然にアニメーションを組み込むことができる。

じゃあ同じことをCSSアニメーションでやるとどうなるだろう。

実際のモーダルウィンドウとは若干処理が異なるとはいえ、やっぱり直感的なコードになっていないと思う。特にcloneNodeで複製しているところとかキモい。

CSSアニメーションでは当然アニメーションの定義はCSS側にあるので、JavaScript側は主にクラスとイベントリスナの付け外しをすることになる。なんていうか、CSSとJavaScriptを行ったり来たりする感じになるんだけど、WAAPIではこの感じがなくなるのが思いのほか楽。

WAAPIだとJavaScriptの比重が上がってしまうことは否めないのだが、どっちにしろアニメーション後に何かしたいときはJavaScriptを使わなければいけないわけで、取り立ててマイナス面とかはない気がする。

てなると、アニメーション後に何もしなくていいときはCSSアニメーションの方がいいという考え方もあるか。

WAAPIではfinishedというプロパティがPromiseを返すので、イベントリスナも不要。コード的にはそんなに変わらないんだけど、「イベントリスナを使わなくていい楽さ」が確実にある。

ユーザーの操作とか関係なく、ずっとアニメーションし続けるような要素ならインスタンスを作らなくていいのでもっと楽。単にElement.animate()ってやるだけ。

今後CSSアニメーションを使うことはたぶんない。