<div class="block n1"></div>
<div class="block n2"></div>
<div class="block n3"></div>
<div class="block n4"></div>
<img class="bg i1" src="http://wallpoper.com/images/00/35/66/26/cameras_00356626.jpg" alt="" />
<img class="bg i2" src="http://oi59.tinypic.com/2ytyb90.jpg" alt="" />
<img class="bg i3" src="http://i62.tinypic.com/dpyan8.jpg" alt="" />
<img class="bg i4" src="http://f.fwallpapers.com/images/monochrome-record-player.jpg" alt="" />

html, body {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.block {
  position: absolute;
  z-index: 100;
}
.n1 {
  top: 0;
  bottom: 0;
  left: 0;
  background: rgba(140,35,24,.5);
  animation: horizantal 7.5s linear infinite;
}
.n2 {
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(94,140,106,.5);
  animation: vertical 7.5s linear infinite;
  animation-delay: 1.5s;
}
.n3 {
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(136,166,94,.5);
  animation: horizantal 7.5s linear infinite;
  animation-delay: 3s;
}
.n4 {
  left: 0;
  right: 0;
  top: 0;
  background: rgba(242,196,90,.5);
  animation: vertical 7.5s linear infinite;
  animation-delay: 4.5s;
}
@keyframes horizantal {
  0% { width: 0 }
  50% { width: 100% }
  100% { width: 0 }
}
@keyframes vertical {
  0% { height: 0 }
  50% { height: 100% }
  100% { height: 0 }
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  opacity: 0;
  animation: appear 8s linear infinite;
}
.i2 {
  animation-delay: 2s;
}
.i3 {
  animation-delay: 4s;
}
.i4 {
  animation-delay: 6s;
}
@keyframes appear {
  10% {
    opacity: 1
  }
  30% {
    opacity: 0;
    background-position: right;
    zoom: 105%;
  }
}

//Free to use anywhere!  Images may be subject to copyright, however...