<div class="l-wrapper">
  <dl class="rotation">
    <dt class="rotation__item--static item--1"></dt>
    <dd class="rotation__item item--2"></dd>
    <dd class="rotation__item item--3"></dd>
    <dd class="rotation__item item--4"></dd>
    <dd class="rotation__item item--5"></dd>
  </dl>
  
  <div class="progress"></div>
</div>
/* Change Image Animation
-------------------------------*/

$max: 4;
$duration: 8s;
$step: $duration/$max;
$step-perc: percentage(1/$max*2);
$half-step-perc: percentage(1/$max);

.rotation__item {
  opacity: 0;
  animation: hide $duration step-end infinite;
  
  &:nth-of-type(#{$max}n) {
    animation-name: hide-half-step;
    }
  
  @for $item from 2 through $max {
    &:nth-of-type(#{$max}n + #{$item}) {
    animation-delay: $step*($item - 1);
    }
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  #{$step-perc} {
    opacity: 0;
    }
}

@keyframes hide-half-step {
  0% {
    opacity: 1;
  }
  #{$half-step-perc} {
    opacity: 0;
    }
}

/* Progress Bar
-------------------------------*/

.progress {
  width: 0;
  height: 5px;
  margin-top: 5px;
  background: rgba(154, 205, 50,.5);
  animation: timer $duration infinite linear;
}

@keyframes timer {
  100% {
    width: 100%;
  }
}

/* Common
-------------------------------*/

BODY {
  background: #FFF linear-gradient(90deg, rgba(154, 205, 50,.3) 50%, rgba(154, 205, 50,.15) 50%);
  background-size: 2em 2em;
  perspective: 500px;
  perspective-origin: center center;
  }

/* Demo layers
-------------------------------*/

$rotation-height: 270px;

.rotation {
  width: 100%;
  height: $rotation-height;
  &__item,
  &__item--static{
    position: absolute;
    width: 100%;
    height: $rotation-height;
    }
}

.item--1,
.item--5 {
  background: url(http://static.colourlovers.com/images/patterns/3342/3342643.png);
  }

.item--2 {
  background: url(http://static.colourlovers.com/images/patterns/2617/2617226.png);
}

.item--3 {
  background: url(http://static.colourlovers.com/images/patterns/3271/3271725.png);
}

.item--4 {
  background: url(http://static.colourlovers.com/images/patterns/2617/2617452.png);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.