【CSS】clip-pathを使用して円が広がっていくアニメーションの中から画像を表示させる方法のデモページ

※デベロッパーツール等でソースコードをご確認ください(Please check using Developer tools)

このページの内容が難しいと感じた方はこちら

スポンサーリンク

Web制作会社LIGが運営するWebデザインスクール

CSS

.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%);
  }
}

JavaScript

$(function(){
  $(".block").addClass("active");
});