春なのでハチを作って飛行させてみようと思いました。

ハチを作る

HTMLとSCSSを使ってハチを描いていきます。
大きく頭・胸・腹の3パーツに分け、そこに翅や脚を追加しています。
腹部の縞模様はグラデーションです。

See the Pen bee_01 by sumigawa (@coriumkb-the-selector) on CodePen.

アニメーションを追加する

ハチっぽいものができたので、アニメーションを追加していきます。

身体全体に上下左右に動いたり傾きが変わったりする動きを付けました。
ふわふわ飛んでいるようなイメージです。

See the Pen bee_02 by sumigawa (@coriumkb-the-selector) on CodePen.

更に、羽ばたきを追加します。
rotate、skew、widthを使って動かしています。

See the Pen bee_03 by sumigawa (@coriumkb-the-selector) on CodePen.

まとめ

webにアニメーションを入れる方法はたくさんありますが、この手法の場合、軽量であること・あとから調整がしやすいことが利点だと思います。

シンプルな形状のものを作るときに取り入れていきたいです。