イラスト・オブジェクトの動き
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
イラスト・オブジェクトの動き
「イラスト・オブジェクトの動き」は直感的に作成できるジェネレータを使用したGIFアニメ、PNGアニメ、SVGアニメで簡単に表現できます。
GIFアニメーション
See the Pen GIFアニメーション by Web Navigator (@web-navigator) on CodePen.
PNGアニメーション（APNG）
See the Pen PNGアニメーション（APNG） by Web Navigator (@web-navigator) on CodePen.
PNGアニメーション（1度だけ動く）
See the Pen PNGアニメーション（png画像が1度だけ動く） by Web Navigator (@web-navigator) on CodePen.
PNGアニメーション（ループして動く）
See the Pen PNGアニメーション（png画像がループして動く） by Web Navigator (@web-navigator) on CodePen.
PNGアニメーション（hoverすると動く）
See the Pen PNGアニメーション（hoverするとpng画像が動く） by Web Navigator (@web-navigator) on CodePen.
JavaScriptと組み合わせて動かすきっかけを設定する方法
See the Pen JavaScriptと組み合わせて動かすきっかけを設定する方法 by Web Navigator (@web-navigator) on CodePen.
SVGアニメーション（Vivus.js）
See the Pen SVGアニメーション（Vivus.js） by Web Navigator (@web-navigator) on CodePen.
イラストとテキストが複数あるSVGアニメーション
See the Pen おまけ：イラストとテキストが複数あるSVGアニメーション by Web Navigator (@web-navigator) on CodePen.
SVGアニメーションを使い、手書き風アニメーションを実現
See the Pen SVG アニメーションを使い、手書き風アニメーションを実現 by Web Navigator (@web-navigator) on CodePen.
