リズムシさんがオノマトペで動く！CSSを使ったアニメーション

CSSを使ったアニメーションのテスト！
「ポヨン」「グルン」のようなオノマトペを押すと、リズムシさんがアニメーションします。

オノマトペで動くリズムシ！
CSSを使ったアニメーションの試作です✨
子どもの描いたイラストを読み込んで動かしたりもできちゃいます🙌
音とオノマトペのワークショップやパフォーマンスで使いたい…!!#スタジオリズムシ pic.twitter.com/JSZ6U9T0QW
— 成瀬つばさ【アプリ再配信中！】 (@tsubasa_n) September 29, 2024

CSSで、1枚のイラストを変形させたり、動かしたりすることでアニメーションにしています。

CSS（Cacading Style Sheets）
Webサイトの文字サイズや色などのデザインやレイアウトを指定、調整するためのプログラミング言語のこと

パラメータは細かく調整できるようにしているので、オリジナルのオノマトペに合わせたアニメーションもつくれます。

もちろん、リズムシ以外のイラストでも動かせます！子どもの描いたイラストを読み込んで動かしたりも、できちゃいます。

音とオノマトペのワークショップやパフォーマンスで使ってみたい…!!

CSSアニメーションを使った、Webアプリケーションなので、PCやスマホのブラウザ上で動作します。
ワークショップ中に絵を描いた後、動かして遊んでもらって、「家に帰ってからもスマホで遊べます！」ということも可能ですね！