<div class="slides">
		<div class="slide" style="background-image:url('https://static.impression.co.uk/2018/02/css-mask-slideshow-image-1.jpg')"></div>
		<div class="slide" style="background-image:url('https://static.impression.co.uk/2018/02/css-mask-slideshow-image-2.jpg')"></div>
	</div>

body {
  background: #F5BC45;
}
.slides {
  position: relative;
  width: 300px; /* slide width */
  height: 200px; /* slide height */
}
.slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px; /* mask frame width */
  height: 200px; /* mask frame height */
  transform: translate(-50%, -50%);
  background-size: 300px; /* slide width */
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 10;
}
.current {
  z-index: 30;
}
.next {
  z-index: 20;
}
.mask {
  -webkit-mask: url('https://static.impression.co.uk/2018/02/impression-mask-steps-small.svg');
  mask: url('https://static.impression.co.uk/2018/02/impression-mask-steps-small.svg');
  -webkit-mask-size: 2400% 100%;
  mask-size: 2400% 100%;
  -webkit-animation: mask-animation 1s steps(23) forwards infinite;
  animation: mask-animation 1s steps(23) forwards infinite;
}
@-webkit-keyframes mask-animation {
  from {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes mask-animation {
  from {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

window.onload = function() {
  var slides = document.querySelectorAll('.slide');
  var current = 0;
  var next = 1;
  var max = slides.length - 1;
  slides[current].classList.add('current');
  slides[next].classList.add('next');
  setInterval(function() {
    slides[current].classList.add('mask');
    setTimeout(function() {
      slides[current].classList.remove('mask', 'current');
      slides[next].classList.add('current');
      slides[next].classList.remove('next');
      current = next;
      if ( next < max ) {
        next++;
      } else {
        next = 0;
      }
      slides[next].classList.add('next');
    }, 1000); // 1000 = transition time
  }, 3000); // 3000 = active slide time
};