<svg>
  <defs>
    <pattern id="p-1" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
      <image xlink:href="http://static.colourlovers.com/images/patterns/3342/3342643.png" width="200" height="200"/>
    </pattern>

    <pattern id="p-2" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
      <image xlink:href="http://static.colourlovers.com/images/patterns/2617/2617226.png" width="200" height="200"/>
    </pattern>

    <pattern id="p-3" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
      <image xlink:href="http://static.colourlovers.com/images/patterns/3271/3271725.png" width="200" height="200"/>
    </pattern>

    <pattern id="p-4" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
      <image xlink:href="http://static.colourlovers.com/images/patterns/2617/2617452.png" width="200" height="200"/>
    </pattern>

    <!-- Normal mask -->
    <pattern id="p-mask-squares" width="50" height="50" viewBox="0 0 50 50" patternUnits="userSpaceOnUse">
      <rect width=".1" height=".1" x="24" y="24" class="elem-mask"/>
    </pattern>
      
    <mask id="m-squares">
      <rect width="100%" height="100%" fill="url(#p-mask-squares)" />
    </mask>
    
    <!-- Mask with delay -->
    <pattern id="p-mask-squares--delay" width="50" height="50" viewBox="0 0 50 50" patternUnits="userSpaceOnUse">
      <rect width=".1" height=".1" x="24" y="24" class="elem-mask elem-mask--delay" transform="rotate(45, 25, 25)"/>
    </pattern>
      
    <mask id="m-squares--delay">
      <rect width="100%" height="100%" fill="url(#p-mask-squares--delay)" />
    </mask>
  </defs>
  
  
  <rect width="100%" height="100%" fill="url(#p-4)" class="rotation-floor"/>
  <g class="rotation">
    <rect width="100%" height="100%" fill="url(#p-1)" class="rotation__item"/>
    <rect width="100%" height="100%" fill="url(#p-2)" class="rotation__item"/>
    <rect width="100%" height="100%" fill="url(#p-3)" class="rotation__item"/>
    <rect width="100%" height="100%" fill="url(#p-4)" class="rotation__item"/>
  </g>
  
</svg>
<div class="progress"></div>
$mask-time: 4s;

.elem-mask {
  stroke: #FFF;
  stroke-width: 0;
  animation: stroke-width $mask-time*2 infinite;  
  
  &--delay {
    animation-delay: $mask-time; 
  }
  }

@keyframes stroke-width {
  60% {
    stroke-width: 100;
    }
  100% {
    stroke-width: 100;
    }
  }

/* Change Image Animation
-------------------------------*/

$max: 4;
$duration: $mask-time * $max;//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;
  stroke-width: 10;
  
  &:nth-child(#{$max}n) {
    animation-name: hide-half-step;
    }

  &:nth-child(odd) {
    mask: url(#m-squares); 
    }
  &:nth-child(even) {
    mask: url(#m-squares--delay);
    }
  
  @for $item from 2 through $max {
    &:nth-child(#{$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;
  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;

svg {
  width: 100%;
  height: $rotation-height;
}



View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.