CSSアニメーションで「たべるんごのうた」を作りました

はじめに

成果物はこちらから。

注意

みなさんご存知のことかと思いますが、ニコニコ動画でいま（2020/05/31現在）ブームが起きているです。
ご存じない方はこちらから御覧ください。

シンプルな動き、シンプルな歌、そして最後にBB素材。
圧倒的中毒性に様々な派生動画が作成され、動画の女の子「辻野あかり」は声を手に入れることに…

私自身は、アイマスに詳しくないのですが、中毒性にやられました。

動きがシンプルなのでかんたんに実装できてしまうのでは？と思い実装をはじめました。
CSSアニメーションの練習です。

transformというプロパティを使うのですが、複数の値の設定とanimationがここまでたくさんの値を設定することが想定されていないのでしょう。かんたんじゃなかったんご…。

調べてみると、CSS Houdiniという技術を使えば実装できそうということで、Firefox等のサポートを捨て実装しました。

リポジトリ: https://github.com/ssssota/taberungo-no-uta

この一大ムーブメントに乗るんご！！！