あなたのキモチ つなげるカタチ

TOP > CSS > 【CSS】clip-pathで円が広がるように画像を表示するテクニック/Clip-path Circle CSS Animation

【CSS】clip-pathで円が広がるように画像を表示するテクニック/Clip-path Circle CSS Animation

スポンサーリンク

この記事は2018年10月8日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

コーディングテクニックの実装内容

円が広がるように画像を表示する方法をご紹介します。

実装所要時間:10分程度
難易度:初心者コーダーでも実装可能

CSS,JavaScriptの記述内容

.block.active {
  animation: clipPath 3s cubic-bezier(.220, .60, .350, 1) 0s 1 forwards;
}

@keyframes clipPath {
  0% {
  clip-path: circle(0 at 50% 50%);
  }
  100% {
  clip-path: circle(100% at 50% 50%);
  }
}

実装のポイント

現在制作中

スポンサーリンク