circle-spread

HTML

<div class="circle-spread">
</div>

SCSS

.circle-spread {
  animation: circle-spread 2s cubic-bezier(.4, 0, .2, 1);
  content: "";
  height: 300px;
  background: url(http://lab.risewill.co.jp/images/web-design/action-sample-img5.jpg);
  background-position: center;
  background-size: cover;
}

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