透過された円形が広がりながら背景が現れる動きを実装したい

実現したいこと

円形（透明・透過）が広がる動き
全体に円形（透明・透過）広がりきるとメイン画像全体が見える
https://supercrowds.co/

上記のページのような動き

前提

円形で透過させた状態で背景画像を徐々に見せていきたいため、cssでbackgroundをtransparentしたり、opacityをつけたけど、そうすると円形そのものがなくなってしまいます。

該当のソースコード


/***** HTML *****/
 <div class="mask">
        <div class="circle">

        </div>
    </div>

    <!-----以下、任意背景画像----->
    <img src="/images/hogehoge.jpg" alt="">
/***** HTML *****/


/***** CSS全画面を覆う背景 *****/
.mask {
    position: fixed; /*固定表示*/
    z-index: 999; /*最前面へ*/
    top: 0;
    left: 0;
    width: 100vw; /*画面幅*/
    height: 100vh; /*画面の高さ*/
    background:#fff; /*好きな色*/
    animation: fadeOut 0.4s forwards; /*フェードアウト*/
    animation-delay: 1.6s; /*円のアニメーション＋遅延時間*/
  }
  
  /*フェードアウトアニメーション*/
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  /***** 広がる円 *****/
  .circle {
    position: absolute; /*固定表示*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; /*中央配置*/
    width: 0;
    height: 0;
    background:#efef; /*ページ全体の背景色*/
    animation: circle-open 1s linear forwards;
    animation-delay: 0.6s; /*任意の遅延時間*/
  }
  
  /*円が拡大するアニメーション*/
  @keyframes circle-open {
    0% {
      width: 0;
      height: 0;
      border-radius: 50%;
    }
    10%,
    80% {
      /*少し拡大して止まる*/
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    99% {
      /*ぎりぎりまで正円*/
      width: 99vw;
      height: 99vw;
      border-radius: 50%;
    }
    100% {
      /*全画面*/
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }
  }

試したこと

円形画像に色を付けると円の形は保たれるけど、透過させると×
アドバイスよろしくお願いします。

CTRL-S

2023/03/05 16:29

ちょっと興味があったので調べてみました。回答と言えるものは出せないのでコメントで。円形にくり抜いた部分のみを透過させる方法 1.SVG画像を使う参考 https://ics.media/entry/210701/ 2.clip-pathでCSSのトリミング参考 https://y-com.info/contents/?p=7737 これを応用すれば実現できると思います。

nori7777

2023/03/05 16:47

わかりにくい質問にかかわらず貴重な情報ありがとうございます。私も調べてclip-pathに辿り着き、似た動きは再現できました。SVG画像のパターもあるんですね。こちらも試してみます。ありがとうございました！

miyabi_pudding

2023/03/06 01:52

背景画像ではなく、position: fixedさせたimg要素ではどうでしょうか？そのブロックに対して、clip-pathや、mask-clipプロパティを使う、としたほうが上手くいくような気がします。

nori7777

2023/03/06 15:06

わかりにくい質問へのアドバイスありがとうございます。こちらも試してみます！ありがとうございました！

回答1件

ベストアンサー

■原因
透過した円形を背景として使用する場合、背景が透過してしまうために円形が消えてしまうのが問題だと思います。

■対応
円形を背景画像の上に重ねて配置し、その円形を拡大しながら透過させることで、背景画像を徐々に見せるアニメーションができると思います

例としては下記のようになるかと思います

html
1<div class="mask">
2  <div class="circle"></div>
3  <img src="/images/hogehoge.jpg" alt="">
4</div>

css
1.mask {
2  position: fixed;
3  z-index: 999;
4  top: 0;
5  left: 0;
6  width: 100vw;
7  height: 100vh;
8}
9
10.circle {
11  position: absolute;
12  top: 50%;
13  left: 50%;
14  transform: translate(-50%, -50%);
15  width: 0;
16  height: 0;
17  border-radius: 50%;
18  background-color: rgba(255, 255, 255, 0.5);
19  animation: circle-expand 2s ease-out forwards;
20}
21
22@keyframes circle-expand {
23  0% {
24    width: 0;
25    height: 0;
26  }
27  100% {
28    width: 200vw;
29    height: 200vw;
30  }
31}