<section class="Hero js-Hero">
  <a href="#0" class="Button js-Button">next</a>
</section>
@import url("https://fonts.googleapis.com/css?family=Roboto");

$white: #fff;
$black: #000;

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: $black;
  color: $white;
  font-family: 'Roboto';
  height: 100%;
  width: 100%;
  position: relative;
}

.Hero {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://unsplash.it/1000/800?image=974");
  animation-name: none;
  &.is-shrinking {
    animation: shrink 1.5s forwards;
  }
  &.is-growing {
    animation: grow 1.5s;
  }
}

.Button {
  background-color: #000;
  border-radius: 4px;
  padding: 1em 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -52px;
  margin-top: -24px;
  &, &:visited, &:hover, &:active {
    color: $white;
    text-decoration: none;
  }
}

@keyframes shrink {
  from {
    -webkit-clip-path: circle(100%);
    clip-path: circle(100%);
    opacity: 1;
  }
  to {
    -webkit-clip-path: circle(0%);
    clip-path: circle(0%);
    opacity: 0;
  } 
}

@keyframes grow {
  from {
    -webkit-clip-path: circle(0%);
    clip-path: circle(0%);
    opacity: 0;
  }
  to {
    -webkit-clip-path: circle(100%);
    clip-path: circle(100%);
    opacity: 1;
  } 
}
View Compiled
const baseUrl = 'https://unsplash.it/1000/800?image=';
const imgIds = [974, 903, 940, 881];
const link = document.getElementsByClassName('js-Button')[0];
const hero = document.getElementsByClassName('js-Hero')[0];
let index = 1;

function preLoadImages() {
  for(let id of imgIds) {
    let img = new Image();
    img.src = `${baseUrl}${id}`;
  }
}

preLoadImages();

function whichAnimationEvent(){
  var a;
  var el = document.createElement('fakeelement');
  var animations = {
    'animation': ['animationend', 'animationName'],
    'OAnimation':['oAnimationEnd', 'animationName'],
    'MozAnimation':['animationend', 'animationName'],
    'WebkitAnimation': ['webkitAnimationEnd', 'WebkitAnimationName']
  }
  for(a in animations){
    if( el.style[a] !== undefined ){
      return [animations[a][0], animations[a][1]];
    }
  }
}

function loadImage(url, callback) {
  const img = new Image();
  img.onload = function() {
    callback();
  }
  img.src = url;
}

const whenImgLoaded = function() {
  hero.style.backgroundImage = `url("${baseUrl}${imgIds[index]}")`;
  hero.classList.remove('is-shrinking');
  hero.classList.add('is-growing');
  if(index >= imgIds.length-1) {
    index = 0;
  } else {
    index++;
  }
}

link.addEventListener('click', function (ev) {
  ev.preventDefault();
  const animationEvent = whichAnimationEvent();
  const animationEnd = animationEvent[0];
  const animationNamePrefix = animationEvent[1];

  hero.style.webkitAnimationName = 'shrink';
  hero.classList.add('is-shrinking');

  animationEnd && hero.addEventListener(animationEnd, function a(event) {
    this.style.webkitAnimationName = '';
    if(event.animationName === 'shrink') {
      loadImage(`${baseUrl}${imgIds[index]}`, whenImgLoaded);
      hero.removeEventListener(animationEnd, a);
    } else {
      hero.classList.remove('is-growing');
    }
  }); 
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.