ぐるっと円で画像が現れる！mask: conic-gradient()で作る気持ちいいCSSアニメーション完全ガイド

/ Web技術 / By

「画像の上に円がぐるっと一周して、スッと表示されるアニメーションをCSSだけで作りたい。」

そんな時にめちゃくちゃ頼れるのが、

mask: conic-gradient(from 150deg, black 100%, transparent 0deg)

のような 円錐グラデーション（conic-gradient）＋ mask の組み合わせです。

この記事では、

  • mask と conic-gradient の基礎
  • ぐるっと円で画像が表示されるアニメーションの実装例
  • 実務で使える書き方やブラウザ対応のポイント
  • 応用パターン（ホバー、スクロール連動、テキスト版など）
  • 実務フロントエンドの目線での注意点

まで、がっつり解説します。

フロントエンドを勉強中の人は「おお、こういう表現もCSSだけでできるのか」とワクワクしてもらい、

実務でコーディングしている人には「明日から案件で使えるわ」と思ってもらえる内容を目指しています。

目次

  1. mask と conic-gradient ってそもそも何者？
  2. 「ぐるっと円」で画像が出現する仕組みをイメージで理解する
  3. 基本の実装：mask: conic-gradient(from 150deg, black 100%, transparent 0deg)
  4. ぐるっと一周させるCSSアニメーション（回転アニメ＋マスク）
  5. 実務向けに整えたサンプルコード（レスポンシブ対応）
  6. よくあるハマりポイントとブラウザ対応
  7. 応用パターン
    • ホバーでぐるっと表示
    • テキストマスクでぐるっと
    • スクロール連動でジワっと出す
  8. デザイン・UXの観点での使いどころ
  9. さらにスキルアップするための関連トピック

1. 

mask

 と 

conic-gradient

 ってそもそも何者？

まずは軽くおさらいから。

1-1. CSS 

mask

 とは？

mask は「要素のどの部分を見せて、どこを隠すか」をコントロールするプロパティです。

  • 黒い部分（不透明） → 表示される
  • 透明な部分 → 非表示になる
  • グレー（中間） → 半透明で表示される

イメージとしては「逆のアルファチャンネル」を CSS で作る感じです。

.element {
  mask: url(mask-image.svg);
}

SVGや画像を使ってもいいですが、今回は グラデーション でマスクを作るのがポイントです。

1-2. 

conic-gradient()

 とは？

conic-gradient() は、円の中心を基準として 角度で色が変わるグラデーション を作る関数です。

background: conic-gradient(red, yellow, green, blue, red);

円グラフのようなイメージを思い浮かべると分かりやすいです。

角度ごとに色が変わるので、「扇形」「円弧」を作るのに非常に便利です。

1-3. 

mask: conic-gradient(…)

 で何ができるのか

mask に conic-gradient() を使うと、

  • ある角度範囲だけ見せる
  • それ以外は透明にして隠す

ということができます。

つまり、

「画像の中心から円形に、扇形の見えている部分だけを徐々に広げていく」

という表現が、CSSだけで実現できます。

2. 「ぐるっと円」で画像が出現する仕組みをイメージで理解する

今回つくりたいのは、ざっくり言うとこんな動きです。

  1. 最初は画像がまったく見えていない（もしくは一部だけ）
  2. 中心から円を描くように表示範囲が広がっていく
  3. 最終的に画像全体が表示される

ポイントは2つ。

  • 画像そのものは常にそこにある
  • 表示・非表示をコントロールしているのは マスク

つまり、主役は画像ではなく、

「画像の上にかぶせる黒い紙（マスク）をどう切り抜いていくか」です。

この切り抜き部分を conic-gradient() で作った扇形 にしてあげれば、

ぐるっと円で表示される演出ができるわけです。

3. 基本の実装：

mask: conic-gradient(from 150deg, black 100%, transparent 0deg)

では、具体的なコードを見ていきましょう。

3-1. まずは静的な「扇形マスク」を作る

最低限のHTMLはこんな感じです。

<div class="circle-mask">
  <img src="sample.jpg" alt="サンプル画像">
</div>


CSSで、circle-mask の中の画像にマスクを適用します。

.circle-mask {
  width: 300px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.circle-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ここがポイント */
  mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
  -webkit-mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
}

3-2. マスク指定の意味を分解する

mask: conic-gradient(from 150deg, black 100%, transparent 0deg);

  • from 150deg → グラデーションの開始角度。どこから扇形を描き始めるか。
  • black 100% → 円全体を黒で塗るイメージ（ここでは「全部見える状態」）
  • transparent 0deg → 0度の位置に透明を指定していることで、 「0度側に透明な境目」が生まれる

正直、この1行はぱっと見だけだと分かりにくいです。

ポイントは「black と transparent の境目がどこにできるか」です。

実際のプロダクションでは、例えばこんなふうに

角度を変えたり色の切り替え位置を調整しながら、狙った扇形の形を作ります。

mask: conic-gradient(
  from 0deg,
  transparent 0deg 0deg,
  black 0deg 270deg,
  transparent 270deg 360deg
);

といった書き方もよく使います。

この記事では、ユーザーが示してくれた記述

mask: conic-gradient(from 150deg, black 100%, transparent 0deg);

をベースに、「全体を黒で可視化した円をぐるっと回す」 アプローチで実装していきます。

4. ぐるっと一周させるCSSアニメーション（回転アニメ＋マスク）

ここからが本題です。

「ぐるっと円で出てくる」動きは、大きく2パターンあります。

  1. マスクの 角度そのものを変化させていく アニメーション
  2. マスクは固定で、要素ごと回転させて見せる アニメーション

今回は、記述をシンプルに保ちつつ

クロスブラウザでも比較的扱いやすい「要素ごと回転パターン」でいきます。

4-1. 回転アニメーションの基本

画像に対してマスクをかけつつ、ラッパー要素を回転させることで

「円弧がぐるっと回って見える」ようにします。

<div class="circle-reveal">
  <img src="sample.jpg" alt="サンプル画像">
</div>
.circle-reveal {
  width: 300px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* 円に見えるようにしたい場合は border-radius もあり */
  border-radius: 50%;
  animation: circle-spin 2s linear forwards;
}

.circle-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
  -webkit-mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
}

/* ぐるっと一周 */
@keyframes circle-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

ここではラッパー .circle-reveal を回転させていますが、

画像自身に transform: rotate() を掛けてもOKです。

4-2. 「見え始めの角度」を調整する

from 150deg を変えると、「最初に見え始める位置」が変わります。

mask: conic-gradient(from -90deg, black 100%, transparent 0deg);

とすると、上方向からぐるっと下へ回る感覚になります。

デザイナーから「12時方向から時計回りに出したい」と言われたら、

from -90deg 付近を起点に調整する、といったコミュニケーションがやりやすくなります。

4-3. 「出ていく」のか「出てくる」のか

アニメーションの印象を変えたいときは、

回転方向とマスクの形を変えてみましょう。

  • 時計回りに表示させたい
  • 反時計回りに「消えていく」ようにしたい

などは、以下のどちらかを調整すればOKです。

  • @keyframes の from / to
  • from の角度、to の角度
  • conic-gradient の from 角度

たとえば、途中で一瞬止める「タメ」を入れたいならこう。

@keyframes circle-spin {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(330deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

地味ですが、演出としてはかなり効きます。

5. 実務向けに整えたサンプルコード（レスポンシブ対応）

ここからは、「そのまま案件に使っても違和感がない」サンプルを書いてみます。

5-1. HTML

<section class="section-circle-reveal">
  <h2 class="section-title">ぐるっと円で画像が現れるCSSアニメーション</h2>
  <div class="circle-reveal-wrapper">
    <div class="circle-reveal">
      <img src="/assets/img/sample.jpg" alt="イメージ画像">
    </div>
    <p class="circle-reveal-caption">
      マスクと円錐グラデーションを使うと、JSなしでこんな表現も実装できます。
    </p>
  </div>
</section>



5-2. CSS

.section-circle-reveal {
  padding: 60px 20px;
}

.section-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 40px;
}

.circle-reveal-wrapper {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.circle-reveal {
  width: min(60vw, 300px); /* SPでは画面幅に合わせて縮小 */
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;

  /* アニメーション */
  animation: circle-spin 2.4s ease-out forwards;
}

.circle-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
  -webkit-mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
}

.circle-reveal-caption {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
}

@keyframes circle-spin {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(330deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* PC向け微調整 */
@media (min-width: 768px) {
  .section-circle-reveal {
    padding: 80px 20px;
  }

  .section-title {
    font-size: 2rem;
  }

  .circle-reveal-caption {
    font-size: 1rem;
  }
}
  • min(60vw, 300px) でSPでもPCでも程よいサイズ
  • ぐるっと一周しきる直前で一度「溜め」を作るアニメーション
  • border-radius: 50% で要素自体も丸く

このままWordPressの固定ページやブロックエディタに

CSSファイルを読み込めば再現できます。

6. よくあるハマりポイントとブラウザ対応

6-1. 

mask

 が効いているか分からない時

「何も変化がない」「画像が全部見えてしまう」というときは、まず以下をチェックしてください。

  1. mask と同時に -webkit-mask も指定しているか
  2. マスクの対象になっているのが 画像要素 かどうか
  3. グラデーション指定が極端になっていないか

とくに -webkit-mask を書き忘れると、

Safari や一部の Chromium 系ブラウザで効きません。

mask: conic-gradient(...);
-webkit-mask: conic-gradient(...);

この2行セットで覚えておくのがおすすめです。

6-2. ブラウザ対応についてざっくり

mask と conic-gradient は、

主要ブラウザではかなり使えるようになっていますが、古い環境では対応していないものもあります。

  • IE → もちろん非対応
  • 古いAndroid標準ブラウザ → 非対応の可能性大

実務的には、

  • IEサポート不要な案件 → 問題なく採用して良い
  • どうしても古い環境も面倒を見る必要がある → フォールバックとして「フェードインのみ」にする、静止画像を表示するなどの対策

が現実的なラインです。

フォールバックの一例として、

@supports を使って「対応ブラウザだけマスクアニメーション」を行うこともできます。

.circle-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

/* maskに対応していたら上書き */
@supports (mask: conic-gradient(black, transparent)) or (-webkit-mask: conic-gradient(black, transparent)) {
  .circle-reveal img {
    mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
    -webkit-mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
  }
}

6-3. パフォーマンスは大丈夫？

mask 自体は、単純な画像変形や opacity に比べると

多少コストは高めですが、通常の使い方であれば問題になることは少ないです。

ただし、

  • 大量の要素に同時適用
  • 常にマウス追従でマスク範囲を変化させる
  • モバイルでのスクロール中に何十個も動いている

といったケースでは、

will-change を使ったり、アニメーションのタイミングを工夫したりして負荷を抑える必要があります。

7. 応用パターン

ここからは、そのまま案件の提案にも使える少し応用的なパターンをご紹介します。

7-1. ホバーでぐるっと表示させる

カードホバーで「画像だけぐるっと出す」と、

かなり目を引くインタラクションになります。

<a href="#" class="hover-card">
  <div class="hover-card__image">
    <img src="/assets/img/sample.jpg" alt="サンプル画像">
  </div>
  <h3 class="hover-card__title">ホバーでぐるっと表示</h3>
  <p class="hover-card__text">マスクと円錐グラデーションを組み合わせたホバーアニメーションの例です。</p>
</a>
.hover-card {
  display: block;
  max-width: 360px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #eee;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hover-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.hover-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
}

.hover-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
  -webkit-mask: conic-gradient(from 150deg, black 100%, transparent 0deg);

  transform: rotate(0deg);
  transition: transform 0.8s ease-out;
}

/* ホバー時にぐるっと */
.hover-card:hover .hover-card__image img {
  transform: rotate(360deg);
}

要素全体のホバーに合わせて、

画像の回転＋マスクにより「ぐるっと表示」が実現できます。

7-2. テキストをぐるっと表示するマスク

画像だけでなく、テキストにも同じアプローチを使えます。

<div class="circle-text-mask">
  <span class="circle-text-mask__inner">Circle Mask Text</span>
</div>
.circle-text-mask {
  display: inline-block;
  padding: 20px 32px;
  background: #000;
  border-radius: 999px;
  overflow: hidden;
}

.circle-text-mask__inner {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;

  mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
  -webkit-mask: conic-gradient(from 150deg, black 100%, transparent 0deg);

  animation: text-circle-reveal 1.8s ease-out forwards;
}

@keyframes text-circle-reveal {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

背景は黒一色にして、テキストの「見える範囲」だけをマスクでコントロールします。

Hero 部分のキャッチコピーに使うと、一気に「今っぽいな」と感じさせられます。

7-3. スクロール連動でジワっと表示（JS少なめ）

GSAPやScrollTriggerを使うとよりリッチにできますが、

ここでは簡易的に IntersectionObserver でスクロールイン時にアニメーションをスタートする例です。

<div class="circle-reveal scroll-trigger">
  <img src="/assets/img/sample.jpg" alt="スクロールで表示">
</div>
.circle-reveal {
  width: min(60vw, 300px);
  aspect-ratio: 1 / 1;
  margin: 100px auto;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.circle-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
  -webkit-mask: conic-gradient(from 150deg, black 100%, transparent 0deg);
}

/* 表示状態になったらアニメーションクラス付与 */
.circle-reveal.is-active {
  opacity: 1;
  transform: scale(1);
  animation: circle-spin 2s ease-out forwards;
}

@keyframes circle-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
document.addEventListener('DOMContentLoaded', function () {
  const targets = document.querySelectorAll('.circle-reveal.scroll-trigger');

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-active');
          observer.unobserve(entry.target);
        }
      });
    },
    {
      threshold: 0.4
    }
  );

  targets.forEach((target) => observer.observe(target));
});
  • 画面の40%程度見えたら is-active クラスを付与
  • クラス付与をトリガーに CSS アニメーションが開始
  • 1度だけアニメーションするので、しつこくない

という構成です。

8. デザイン・UXの観点での使いどころ

ここまで実装寄りで話してきましたが、

実務で「どこで使うか」を考えることもかなり重要です。

8-1. ぐるっと演出がハマるケース

  • ブランドサイトのメインビジュアル → ロゴやキービジュアルをぐるっと出す
  • サービス紹介のアイコン → 3つ並んだアイコンを、順番にぐるっと表示
  • 実績・ポートフォリオ → サムネイルに視線誘導をしたいとき

8-2. やり過ぎ注意なケース

  • 全ての画像にぐるぐるアニメを付ける
  • 重要なテキストを読ませたい場所なのに、 アニメーションがうるさくて内容が頭に入ってこない

アニメーションはスパイスなので、

「ここぞ」という部分に絞ってあげるとサイト全体が上品に見えます。

9. さらにスキルアップするための関連トピック

最後に、この「ぐるっと円マスク」から発展させて学ぶと良いトピックをいくつか挙げておきます。

9-1. 他のマスク系プロパティ

  • mask-image
  • mask-mode
  • mask-repeat
  • mask-position
  • mask-size

mask をショートハンドで使うことが多いですが、

細かい挙動を制御するにはこれらの理解が役に立ちます。

9-2. グラデーションの応用

  • linear-gradient × mask で上下にフェード
  • radial-gradient × mask で円形フェード

たとえば、下部だけフェードアウトさせたいときはこんな感じです。

.image-fade-bottom {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

conic-gradient に慣れてきたら、

他のグラデーション＋マスクの組み合わせもどんどん試してみてください。

9-3. アニメーションの世界を広げる

今回の例では

  • transform: rotate
  • animation

をメインで使いましたが、さらに踏み込むなら

  • clip-path との組み合わせで複雑な形状マスク
  • filter（ブラー）と合わせてふんわり演出
  • GSAP / ScrollTrigger で高度なスクロール連動アニメーション

などもおすすめです。

「アニメーションで何を伝えるのか」「どこに集中してもらいたいのか」という視点を持つと、

ただのギミックではなく UXを支える演出 になっていきます。

おわりに：

mask: conic-gradient

 は「ちょっと差がつく」武器になる

mask: conic-gradient(from 150deg, black 100%, transparent 0deg) のような記述は、

最初は「何が起きているのか全然ピンと来ない」かもしれません。

ただ、

  • 画像自体はずっとそこにいる
  • 見せる／隠すの主役はマスク
  • 円錐グラデーションで扇形を作って、それを回転させているだけ

という構図さえつかめば、一気に応用の幅が広がります。

  • ぐるっとロゴが出る
  • ぐるっとアイコンが現れる
  • ぐるっとテキストが浮かび上がる

どれも JavaScript に頼らず、CSSだけで実装可能です。

ぜひ、自分のポートフォリオサイトやクライアントワークの「ここぞ」という箇所で、

このテクニックを試してみてください。

「あ、この人ちゃんとCSS使いこなしてるな」

と伝わる、ほんの少しの「差」が作れるはずです。

もし、

  • 別デザインへの落とし込み例が欲しい
  • 既存のサイトに組み込みたいので、 具体的なHTML構造に合わせたコードが欲しい

などあれば、そこ前提のコードまで一緒に組んでいきましょう。

(Visited 2 times, 1 visits today)

関連投稿:

  1. 【CSS】蛍光ペンのようなunderlineの実装方法
  2. 【CSS】スクロールバーをカスタマイズする方法
  3. CSSのmask-compositeプロパティの使い方を徹底解説！複数マスク画像の合成方法と具体例
  4. CSSで実現する洗練された背景画像とグラデーションホバー効果～ユーザー体験を向上させる高度なデザインテクニック～