NCDCエンジニアブログ
🔵

中央から円形が広がるCSSアニメーション

K
に公開
CSS
tech

実現するアニメーション

次のように、中央から円形が広がるCSSアニメーションを実装します。

ソースコード

<body>
  <div class="wrapper">
    <div class="content">
      Hello!
    </div>
  </div>
</body>

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  background-color: #326db2;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.content {
  width: 100vw;
  height: 100vh;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: circle(0%);
  animation: showCircle 1.5s ease-in-out 1s forwards;
}

@keyframes showCircle {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(150%);
  }
}

clip-pathを変化させることで、コンテンツを表示する円形領域を拡大させていきます。
初期表示時は半径が0%の円形のため、コンテンツ部分は非表示です。
アニメーション終了時には半径が150%となり、画面全体にコンテンツが表示されます。

バリエーション

中央以外から広がる

circle内でatを付けることで、円の中心となる位置を指定できます。
デフォルトは中央のため、中央から広がる場合は省略できます。

例えば右下から広がる場合、次のように指定します。

.content {
  /* 省略 */
  clip-path: circle(0% at 0% 100%);
  animation: showCircle 1.5s ease-in-out 1s forwards;
}

@keyframes showCircle {
  from {
    clip-path: circle(0% at 0% 100%);
  }
  to {
    clip-path: circle(150% at 0% 100%);
  }
}

複数の円が順番に広がる

要素を増やし、アニメーションの開始時間をずらすことで表現できます。
次の例は、中間の円は表示から1秒後、コンテンツは1.25秒後にアニメーションが開始するようにしています。

<body>
  <div class="wrapper">
    <div class="sub-wrapper">
      <div class="content">
        Hello!
      </div>
    </div>
  </div>
</body>

/* 省略 */

.sub-wrapper {
  background-color: #6ab1ef;
  clip-path: circle(0%);
  animation: showCircle 1.5s ease-in-out 1s forwards;
}

.content {
  /* 省略 */
  clip-path: circle(0%);
  animation: showCircle 1.5s ease-in-out 1.25s forwards;
}

@keyframes showCircle {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(150%);
  }
}
NCDCエンジニアブログ
NCDCエンジニアブログ

NCDC株式会社( ncdc.co.jp/ )のエンジニアチームです。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！ ※エンジニア以外も記事を投稿することがあります

Discussion