今回は、コーディングで実装できるメッシュグラデーションのCSSアニメーション事例を紹介します。

最初は1枚の画像

最初は、メッシュグラデーション画像をトリミングしてデザインしたものでした。
この画像をそのまま静止画として使うのではなく、色を抽出してCSS化し、グラデーションが動き続けるアニメーションを加えることから始めました。

コーディング作業に入る段階で、サイトの目的を改めて整理するブラッシュアップを行い、当社の強みを伝えるヒーローエリアを設置することに。
そこで、ロゴに加えたアニメーションに、テーマカラーに沿った配色の変化を組み込み、動き続ける表現にしました。
色が混ざり合い、変化し続ける様子は、Web制作の過程を想起させます。

CSSカスタムプロパティ＋Sass

複数の色が円形に回転しながら、ロゴの形状に沿ってブレンドされるアニメーションです。

色の定義

各頂点の色をCSS変数で定義します。

:root {
  --mesh-color-1: **color-code-1**;
  --mesh-color-2: **color-code-2**;
  --mesh-color-3: **color-code-3**;
}

※任意のカラーコードを指定

カスタムプロパティで座標を管理

@for $i from 1 through $points {
  @property --x#{$i} {
    syntax: "";
    initial-value: #{$center + "%"}; 
    inherits: false;
  }
  @property --y#{$i} {
    syntax: "";
    initial-value: #{$center + "%"}; 
    inherits: false;
  }
}

• $points：メッシュ頂点の数
• @property：CSS Houdiniでアニメーション可能な変数を定義
• --x1, --y1 ... といった形で頂点座標を管理
• 初期値は中心（例: 50%）

この仕組みにより、CSSだけで頂点の座標をリアルタイムに更新できます。

円形運動を計算する関数

@function circle-pos($angle) {
  $rad: $angle * math.$pi / 180;
  $x: $center + $radius * math.cos($rad);
  $y: $center + $radius * math.sin($rad);
  @return ($x, $y);
}

• $angle（度） → ラジアンに変換
• $radius：円の半径
• $center：中心座標
• 出力は (x, y) の配列

この関数で、頂点を円運動させる座標を簡単に計算できます。

アニメーションのキーを作成

@keyframes moveMesh {
  @for $f from 0 through ($frames - 1) {
    $percent: (100 * $f / ($frames - 1));
    $step: 360 * $f / ($frames - 1);
    #{$percent}% {
      @for $i from 1 through $points {
        $angle: $step + (360 / $points) * ($i - 1);
        $pos: circle-pos($angle);
        --x#{$i}: #{nth($pos, 1)}%;
        --y#{$i}: #{nth($pos, 2)}%;
      }
    }
  }
}

• $frames：アニメーションのフレーム数
• 各頂点を順番に円周上に移動
  
• CSS変数を更新することで、radial-gradient の位置も自動で変化

結果、色の頂点が滑らかに動くアニメーションになります。

メッシュグラデーションを生成

@mixin mesh-gradients() {
  $gradients: ();
  @for $i from 1 through length($mesh-points) {
    $pos: nth($mesh-points, $i);
    $color: unquote("var(--mesh-color-#{$i})");
    $gradient: radial-gradient(
      at #{nth($pos, 1)} #{nth($pos, 2)},
      #{$color} 0%,
      rgba(#fff, 0) 70%
    );
    $gradients: append($gradients, $gradient, comma);
  }
  background: #{$gradients};
}

• $mesh-points：動かす頂点のリスト
• 各頂点に radial-gradient を作成
• 複数のグラデーションを 重ね合わせ ることでメッシュ状の表現
• 透明度を設定することで色が自然にブレンド

ロゴに適用

.mesh-gradients {
  @include mesh-gradients();
  width: 300px;
  height: 300px;
  mask: url(logo.svg) no-repeat center / contain;
  animation: moveMesh 10s linear infinite alternate;
}

• mask-image でロゴ形状に切り抜き
• animation でメッシュを動かす
• alternate → 前後に動かして自然なループ

これでロゴの内部が動くグラデーションのアニメーションになります。

ブラウザサポート

@propertyはモダンブラウザでサポートされていますが、古いブラウザではアニメーションが動作しない可能性があります。

• Chrome/Edge: 85+
• Firefox: 128+
• Safari: 16.4+

この手法のメリット

1. パフォーマンス: CSSアニメーションなのでGPUアクセラレーションが効く
2. 柔軟性: 色・速度・形状を簡単にカスタマイズ可能
3. 保守性: Sassの変数とループで管理しやすいコード
4. デザイン性: 静的なロゴに動きを加えられる
5. ブランディング効果: ファーストビューでの印象付け

ロゴだけでなく、背景装飾など、様々な場面で応用できるテクニックです。ぜひ試してみてください。

株式会社リアライズでは、ホームページ制作を随時承っております！

皆様の目的に最適なWeb制作をサポートします！
まずはお気軽にご相談ください。