HTML5の高い表現力によって、アニメーションはなくてはならないものになっています。しかしJavaScriptの書き方であったり、CSS3の使い方によってはアニメーションというのは非常に重たい処理で、スムーズに表示されなかったりします。 そんな現状を変えていこうと活動しているのがCSS Houdiniタスクフォースで、その活動の一端がAnimation Worklet Explainerで確認できます。

Animation Worklet Explainerの使い方

Animation Worklet Explainerはまだまだ新しい技術を使っているのでGoogle Chrome Canaryでないと良さが分からないようです。例えばスクロールでヘッダー部の大きさが変わるデモ。こちらはSafariです。

こちらはGoogle Chrome Canary。実際に操作してみるとスムーズさが違うように感じます。

別なデモ。スクロールするとDOMが重なり、スクロールが止まると元の状態に戻ります。こちらはSafari。

こちらはGoogle Chrome Canary。

別なアニメーション。アニメーションGIFにすると滑らかに見えませんが、実際に試すとスムーズです。

Animation Worklet Explainerはまだまだ一般的に使える訳ではありません。が、主要なブラウザベンダーがすべてタスクフォースに参加していますので、ここで作ったドラフトがW3Cに取り込まれれば、その多くが実装されていくのではないでしょうか。今後の技術遷移を占う上でも要チェックでしょう。

Animation Worklet ExplainerはCSS製、W3C Licenseのオープンソース・ソフトウェアです。

WICG/animation-worklet: Proposal for a new primitive for creating scroll-linked and other high performance procedural animations on the web.