A Pen by Fabrizio Calderan.

index.html

<div>
<img src="http://dummyimage.com/280x200/56AD30/fff.png&text=1" />
<img src="http://dummyimage.com/280x200/1560f0/fff.png&text=2" />
<img src="http://dummyimage.com/280x200/C03229/fff.png&text=3" />
</div>

Slideshow-with-CSS3-Animations.markdown

Slideshow with CSS3 Animations

A simple proof-of-concept: a slideshow animation using CSS3 only

See the demo by Fabrizio Calderan.

License.

style.css

div { position: relative; }

img {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  -webkit-animation: slideshow 12s linear 0s infinite;
  -moz-animation: slideshow 12s linear 0s infinite;
  -ms-animation: slideshow 12s linear 0s infinite;
  -o-animation: slideshow 12s linear 0s infinite;
  animation: slideshow 12s linear 0s infinite;
}


img:nth-child(2) {
  z-index: 2;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -ms-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

img:nth-child(3) {
   z-index: 1;
  -webkit-animation-delay:  8s;
  -moz-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}
 

@-webkit-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-moz-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-ms-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-o-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}