Retro Fading Slideshow with Pure CSS/CSS3

Preview:

Description:

A retro & full page image slideshow which cycles through a set of images with animated overlays and a crossfade animation based on CSS3. Created by Joshuasm32.

How to use it:

Create animated overlay blocks in the page.

<div class="block n1"></div>
<div class="block n2"></div>
<div class="block n3"></div>
<div class="block n4"></div>

Insert a set of images into the document for the slideshow.

<img class="bg i1" src="1.jpg" alt=""> 
<img class="bg i2" src="2.jpg" alt=""> 
<img class="bg i3" src="3.jpg" alt=""> 
...

The required CSS/CSS3 styles for the slideshow.

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);
  -webkit-animation: horizantal 7.5s linear infinite;
  animation: horizantal 7.5s linear infinite;
}
.n2 {
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(94,140,106,.5);
  -webkit-animation: vertical 7.5s linear infinite;
  animation: vertical 7.5s linear infinite;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.n3 {
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(136,166,94,.5);
  -webkit-animation: horizantal 7.5s linear infinite;
  animation: horizantal 7.5s linear infinite;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.n4 {
  left: 0;
  right: 0;
  top: 0;
  background: rgba(242,196,90,.5);
  -webkit-animation: vertical 7.5s linear infinite;
  animation: vertical 7.5s linear infinite;
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
}
@-webkit-keyframes 
horizantal {  0% {
width: 0
}
 50% {
width: 100%
}
 100% {
width: 0
}
}
@keyframes 
horizantal {  0% {
width: 0
}
 50% {
width: 100%
}
 100% {
width: 0
}
}
@-webkit-keyframes 
vertical {  0% {
height: 0
}
 50% {
height: 100%
}
 100% {
height: 0
}
}
@keyframes 
vertical {  0% {
height: 0
}
 50% {
height: 100%
}
 100% {
height: 0
}
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  opacity: 0;
  -webkit-animation: appear 8s linear infinite;
  animation: appear 8s linear infinite;
}
.i2 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.i3 {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.i4 {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
@-webkit-keyframes 
appear {  10% {
 opacity: 1
}
 30% {
 opacity: 0;
 background-position: right;
 zoom: 105%;
}
}
@keyframes 
appear {  10% {
 opacity: 1
}
 30% {
 opacity: 0;
 background-position: right;
 zoom: 105%;
}
}