CSS @property と conic-gradient で描くオーロラリング

作品

4 つのリングがそれぞれ異なる速度・方向で回転し続けます。 JavaScript は一切使わず、CSS だけで動いています。

@property とは

通常の CSS カスタムプロパティ（--my-color: red のような変数）は transition や animation で補間できません。 @property を使うと型と初期値を宣言でき、アニメーション可能なカスタムプロパティになります。

@property --angle {
  syntax: '<angle>';   /* 型: 角度 */
  inherits: false;     /* 継承しない */
  initial-value: 0deg; /* 初期値 */
}

syntax: '<angle>' と宣言することで、ブラウザが 0deg → 360deg の間を補間できるようになります。

conic-gradient の開始角を回転させる

conic-gradient(from <angle>, ...) の from に @property で定義したカスタムプロパティを使います。

.ring {
  background: conic-gradient(
    from var(--a1),       /* ← この角度をアニメーション */
    transparent 0%,
    #00DC82 15%,
    transparent 45%
  );
  animation: spin 4s linear infinite;
}

@keyframes spin {
  to { --a1: 360deg; }  /* 0deg → 360deg へ補間 */
}

--a1 が 0° から 360° へ変化するにつれ、グラデーションの始点がぐるりと一周します。 これが「グラデーションが回転する」ように見える仕組みです。

mask-image でリング状に切り抜く

conic-gradient は円形全体を塗るため、そのままでは円盤になってしまいます。 mask-image に radial-gradient（中心と外縁を透明に）を指定し、リング状に切り抜きます。

mask-image: radial-gradient(
  circle,
  transparent 68%,  /* 内側: 透明 → リングの穴 */
  black       72%,  /* ここからリングの帯 */
  black       92%,
  transparent 96%   /* 外縁: フェードアウト */
);

4 つのリングに異なる動きを与える

各リングに別々の @property 変数と animation-duration を割り当てます。 逆回転は animation-direction: reverse で実現します。

/* 内側から外側へ: 速い→遅い */
.ring-1 { animation: spin1  4s linear infinite; }         /* 速い */
.ring-2 { animation: spin2  7s linear infinite; }         /* 中速 */
.ring-3 { animation: spin3 11s linear infinite; }         /* 遅い */
.ring-4 { animation: spin4 17s linear infinite reverse; } /* 最遅・逆回転 */

回転速度の比（4:7:11:17）を素数に近い値にすることで、 4つが元の配置に戻る周期が極めて長くなり、飽きない動きになります。

技術比較