非実用的だけどクセになる⁉🎭 絵文字で遊ぶCSSアニメーション

Posted at 2025-02-18

動くアートを自作してみよう！HTMLとCSSで実現する動的絵文字アニメーション

こんにちは！現役エンジニアの@YushiYamamotoです。
今回は、HTMLとCSSだけで実現する、絵文字を使ったダイナミックなアニメーション表現を解説します。
「これはとんでもなく非実用的だ。」という一風変わったコメントも飛び出す、遊び心溢れる実装例ですが、実践的なテクニックもたっぷり詰まっていますので、ぜひ一度試してみてくださいね！

See the Pen The Least Practical Way to Juggle by Yushi Yamamoto (@yamamotoyushi) on CodePen.

はじめに

Webの表現力が向上する中で、最近ではCSSだけで実現できるアニメーションやエフェクトが豊富に登場しています。
今回紹介するコードは、絵文字を使いながら、各レイヤーが異なるぼかしや回転のアニメーションで動くという、まるでデジタルアートのような表現になっています。
プログラミング初心者の方でも理解しやすいように、コードの各部分を詳しく解説していきます！😊

プロジェクト概要

このプロジェクトでは、以下の要素を組み合わせています。

HTMLでシンプルな構造
絵文字を表示するための <div> 要素を複数用意。
CSSでのレイアウトとアニメーション
Flexboxを使った中央寄せレイアウト、各要素の絶対配置、ぼかし効果、そして複数の回転アニメーション。
疑似要素での多層化
各要素に対して、:before と :after を利用し、別の絵文字やアニメーション効果を重ねています。

下記の図は全体の構造を簡単に示したものです。

┌─────────────────────┐
│       <div>         │
│  ┌────┬─────┬────┐ │
│  │ball│ball2│ball3│ │
│  ├────┼─────┼────┤ │
│  │ball│ball2│ball3│ │
│  └────┴─────┴────┘ │
└─────────────────────┘

HTML構造の解説

HTMLは以下のようにシンプルに構成されています：

<div>
  <div class="ball"> 🟡🟢</div>
  <div class="ball2">🔵🔴</div>
  <div class="ball3">🔴🟡</div>
  <div class="ball"> 🟡🟢</div>
  <div class="ball2">🔵🔴</div>
  <div class="ball3">🔴🟡</div>
</div>

親要素
外側の <div> 要素は、全体のコンテナとして機能します。
子要素
各子要素には、ball、ball2、ball3 といったクラスが付与され、内部には絵文字が配置されています。
※ 絵文字は、アニメーションの「見た目」として表示される重要な要素です。

CSSスタイルとアニメーションの解説

CSSで実装されている内容は、主に 4 つのポイントに分けて解説できます。

ボディの設定

まずは、ページ全体のレイアウトを整えます。

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  overflow: hidden;
}

中央寄せレイアウト
display: flex; と justify-content: center;、align-items: center; を指定することで、内部コンテンツを画面中央に配置しています。
全画面表示
height: 100vh; により、ビューポート全体の高さが確保され、どの端末でも中央に表示されます。
背景と表示領域の制御
背景を黒 (background-color: black;) にしているため、絵文字の明るい色が際立ち、overflow: hidden; でアニメーションが画面外に出ても見えなくなります。

共通クラスとアニメーション

次に、各絵文字に共通の設定を適用します。

.ball,
.ball2,
.ball3 {
  mix-blend-mode: lighten;
  font-size: 3rem;
  position: absolute;
  transform-origin: center;
  animation: rotate-ball 3s infinite linear;
}

mix-blend-mode
mix-blend-mode: lighten; によって、要素が重なった時に明るい色のみが際立つようになり、視覚的に美しい効果が生まれます。
アニメーションの基本設定
すべての要素に対して rotate-ball アニメーションが3秒周期で実行され、線形な動きで動き続けます。

疑似要素を利用した多層表現

各要素に対し、さらに複数のレイヤーを重ねることで、複雑な動きを表現します。

.ball:after,
.ball2:after,
.ball3:after,
.ball:before,
.ball2:before,
.ball3:before {
  position: relative;
  filter: blur(20px);
  animation: rotate-ball 5s infinite linear;
}

.ball:after {
  content: "🔴";
  left: -5px;
}

.ball2:after {
  content: "🟢";
  left: -5px;
}

.ball3:after {
  content: "🔵";
  left: -5px;
}

.ball:before {
  content: "🔵";
  left: 5px;
  animation: rotate-ball 13s infinite linear;
}

.ball2:before {
  content: "🔴";
  left: 5px;
  animation: rotate-ball 13s infinite linear;
}

.ball3:before {
  content: "🟢";
  left: 5px;
  animation: rotate-ball 13s infinite linear;
}

疑似要素の役割
:after と :before を使って追加の絵文字を表示することで、元の要素にさらなる動的効果と奥行きを付けています。
アニメーションの違い
アニメーションの周期やleftのずらし値を変えることで、各レイヤーが独立した動きをするようになっています。
例えば、:beforeのアニメーションは13秒周期、:afterは5秒周期で動くため、複雑な動きが生み出されています。

キーフレームアニメーション

最後に、回転とスケール変化を定義するキーフレームアニメーションです。

@keyframes rotate-ball {
  0% {
    transform: rotate(0deg) scale(0.1);
  }
  50% {
    transform: rotate(180deg) scale(21);
  }
  100% {
    transform: rotate(360deg) scale(0.1);
  }
}

変化のプロセス
- 0%: 回転が0度、非常に小さなサイズ（scale 0.1）からスタート
- 50%: 180度回転し、急激に拡大（scale 21）
- 100%: 再び360度回転し、元の小さなサイズに戻る

この設定により、絵文字が一瞬で大きくなったり小さくなったりするダイナミックな動きが実現されています。まるで花火のように、瞬時の変化と余韻のブレンドが楽しめます✨

実装例

以下に、今回のコード全体をまとめた実装例を示します。あなたの環境にコピー＆ペーストし、ブラウザで動きをぜひ確認してみてください！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>動く絵文字アニメーション</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: black;
      overflow: hidden;
    }

    .ball,
    .ball2,
    .ball3 {
      mix-blend-mode: lighten;
      font-size: 3rem;
      position: absolute;
      transform-origin: center;
      animation: rotate-ball 3s infinite linear;
    }
    .ball {
      animation-delay: 1s;
      filter: blur(50px);
    }
    .ball2 {
      filter: blur(20px);
      animation-delay: 255ms;
    }
    .ball3 {
      filter: blur(15px);
    }

    .ball:after,
    .ball2:after,
    .ball3:after {
      position: relative;
      left: -5px;
      filter: blur(20px);
      animation: rotate-ball 5s infinite linear;
    }

    .ball:before,
    .ball2:before,
    .ball3:before {
      filter: blur(20px);
      position: relative;
      left: 5px;
      animation: rotate-ball 13s infinite linear;
    }

    .ball:after {
      content: "🔴";
    }
    .ball2:after {
      content: "🟢";
    }
    .ball3:after {
      content: "🔵";
    }
    .ball:before {
      content: "🔵";
    }
    .ball2:before {
      content: "🔴";
    }
    .ball3:before {
      content: "🟢";
    }

    @keyframes rotate-ball {
      0% {
        transform: rotate(0deg) scale(0.1);
      }
      50% {
        transform: rotate(180deg) scale(21);
      }
      100% {
        transform: rotate(360deg) scale(0.1);
      }
    }
  </style>
</head>
<body>
  <div>
    <div class="ball"> 🟡🟢</div>
    <div class="ball2">🔵🔴</div>
    <div class="ball3">🔴🟡</div>
    <div class="ball"> 🟡🟢</div>
    <div class="ball2">🔵🔴</div>
    <div class="ball3">🔴🟡</div>
  </div>
</body>
</html>

ポイント

実装時は、各要素のアニメーション遅延やぼかしの値を変更することで、オリジナルのビジュアルエフェクトをカスタマイズできます。

mix-blend-mode や transform-origin などのプロパティも、使い方によっては非常に強力な表現力を発揮します。

まとめ

今回のプロジェクトでは、HTMLとCSSのみで複数の絵文字を重ね合わせた動的アニメーション表現を実現しました。
実用性よりも表現力を重視したこのコードは、アート的な側面で楽しむと同時に、CSSのアニメーション技法や疑似要素の活用方法を学ぶ良いサンプルとなります。

実際のWebプロジェクトに組み込むには、パフォーマンスやユーザビリティも考慮する必要がありますが、今回のサンプルコードを通して、CSSの奥深さと柔軟性を再発見できたのではないでしょうか。😄

参考リンク

ぜひ、このコードをベースに、あなた自身のユニークなアニメーションエフェクトを試してみてください！
質問や改善のアイデアがあれば、コメントやSNSで教えていただけると嬉しいです。Happy coding! 🚀