あそびで「百千鳥」Webフォントで鳥さんが走るアニメーションを作りました

※PCで見た方が速く走っているように見えます

作ったいきさつ

先月、Adobeから「百千鳥」というバリアブルフォントが発表されました。

このフォントに鳥さんの絵文字が入っているということで、この鳥さんはイラレで召喚でき、文字幅やウェイトを変えることによって鳥さんが動くというものでした。

この鳥さんでアニメーションできないかな？
と思い立って、「百千鳥 VF」のWebフォントを見たところ、「🐦️」の絵文字で鳥さんを召喚(表示)することができた！！！ので、CSSで遊びました！

ソースコードの詳細

バリアブルフォントのCSSの扱いとCSSアニメーション

以下記事を参考にして、アニメーションのさせ方もこの記事を参考にしました。

鳥さんはfont-variation-settingsというCSSプロパティで、wght（font-weight / 太さ）を変えることで動かすことができました。

CSSアニメーションで、足をバタバタさせる速さは0.06秒でめっちゃ速めにしてます（笑）。
イージングはeaseで落ち着きました。（ease-outだとなんか違和感がありました。）

.bird-run {
  animation: run-animation .06s ease infinite alternate;
}
@keyframes run-animation {
  from { font-variation-settings: "ital" 0, "wght" 200, "wdth" 120; }
  to   { font-variation-settings: "ital" 0, "wght" 900, "wdth" 120; }
}

アニメーション切り替えのタイミングはJavaScriptで

3秒ズンっズンっズンっと全身でリズム取る
2秒走る
全身でリズム取りに戻る

の3つのアニメーションを組み合わせがややこしかったので、アニメーションはCSSのClass名で分けて、setTimeout()で秒数数えて.classList.replace()でClass名を切り替えることにしました。同期はasync/awaitで取っています。

'use strict';

(async () => {
  await new Promise((resolve) => {
    setTimeout(() => {
      document.getElementById('bird').classList.replace('bird-rap', 'bird-run');
      document.getElementById('bird-cage').classList.add('bird-move');
      resolve();
    }, 3000);
  });
  await new Promise((resolve) => {
    setTimeout(() => {
      document.getElementById('bird').classList.replace('bird-run', 'bird-rap');
      resolve();
    }, 2000);
  });
})();

さいごに感想

font-variation-settingsをよく知っていなかったので勉強になりました！
お仕事でアニメーション表現の幅が広がるといいなと思います。