だんだん寒くなってきて、あたたかい食べ物がおいしい季節になってきましたね。
寒いからこそ、お鍋などを食べてぽかぽかとあたたまる瞬間は最高に幸せです。

そう、ぽかぽかと。

わざとらしくオノマトペを入れてみました。
そう、今回のテーマはオノマトペです。

アニメーションの引き出しを増やしたいな、でもどうやって練習するのがいいのだろう、、と悩んでいたところ、オノマトペを題材にしてみたらいいんじゃない？と、ふとアイデアがふってきたので、やってみることに。

ChatGPTさんに挙げてもらったオノマトペの中から３つ選んで、CSSアニメーション縛りでやってみました。

1つめ 「ぐはっ」

translate、scale、rotate、skewX を組み合わせています。
イージングについては、イージングジェネレーター でカスタマイズしたCSSを出力することができるので、こちらを利用しています。便利！
このジェネレーターが便利すぎて、まさに心を「ぐはっ」と打ち抜かれました。

2つめ 「ほろり」

こちらも translate、scale と rotateY、skewY を組み合わせてできています。
シンプルゆえに、なかなかもう一捻りが出てこず難しいお題でした。。。
あともう一味足したい時に skew に頼りがちかもしれません。

3つめ 「パチパチ」

こちらも使用しているのは、translate、scale、rotate と変わらないのですが、3つめにしてようやくコツをつかんで来た気がします。
一文字ずつ位置や角度を調節し、徐々に大きさを小さくしていくことで音の大きさも表現できた気がします。

さて、いかがだったでしょうか。
オノマトペからだけでも、アニメーションのイメージってこんなにも膨らませることができるんだなと、やってみて非常に楽しかったです。
同じオノマトペでも、まだまだいろんな表現ができそうですよね。
アニメーションの引き出しを増やしたい！なんて方は、気軽に挑戦できるのでぜひやってみてくださいね。

それではまた！