面白い!HTMLとCSSで作られたCSSアニメーションキャラクター11選!

最近はCSSだけで色々なアニメーションが作れてしまいます。
すごいですよね。

そこで本日はHTMLとCSSのみで作られたアニメーションキャラクターをご紹介します。

正直実務で役に立つか怪しいものもたくさんありますが、どういった作りになっているのか、どういう風に動かしているのかはとても参考になります。

ぜひ一度どういうコードを使っていて、どういう風に動いているのかコードを確認してみて下さい。

↓こちらもオススメ↓

【UIデザイナー必見】動きが面白い!目を引くこと間違いなしのCSSアニメーション集part1 【UIデザイナー必見】動きが面白い!目を引くこと間違いなしのCSSアニメーション集part2 CSSだけでここまで出来る!?タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選

クラッシュ・バンディクー アクアク

See the Pen Aku Aku CSS art by Joao Victor (@jotavejv) on CodePen.

トイストーリーエイリアン

See the Pen pure-css-toystory-alien by Sunyoung Park (@sunnn) on CodePen.

レゴ エメット

See the Pen The Lego Movie’s Emmet in Pure CSS by Rachel Bull (@rachel_web) on CodePen.

ポケモン ゼニガメ

See the Pen Baby Squirtle (Pure CSS) by Josh Bader (@joshbader) on CodePen.

ポケモン イーブイ

See the Pen CSS Eevee by David Khourshid (@davidkpiano) on CodePen.

フランケンシュタイン

See the Pen Daily CSS Images 16 – Frankenstein by Victoria Ninni Bergquist (@vicbergquist) on CodePen.

ミッ○ーマウス

See the Pen Disney’s Mickey Mouse in Pure CSS by Rachel Bull (@rachel_web) on CodePen.

サウスパークっぽいキャラクター

See the Pen A Rick Without a Morty – Pure CSS. by James Gilmore (@jcgilmore2) on CodePen.

Angry Birds

See the Pen Angry Birds in Pure CSS by Rachel Bull (@rachel_web) on CodePen.

Family Guy Brian Griffin

See the Pen Family Guy’s Brian Griffin in Pure CSS by Rachel Bull (@rachel_web) on CodePen.

ゼルダの伝説 ゼルダ姫

See the Pen CSS Princess Zelda by Charlie Marcotte (@FUGU22) on CodePen.

↓こちらもオススメ↓

【UIデザイナー必見】動きが面白い!目を引くこと間違いなしのCSSアニメーション集part1 【UIデザイナー必見】動きが面白い!目を引くこと間違いなしのCSSアニメーション集part2 CSSだけでここまで出来る!?タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選