Minimalist Cover Flow Slideshow with Pure CSS/CSS3

Preview:

Description:

Makes use of CSS3 animation, transform and keyframes to create an auto rotating image slideshow with a familiar ‘cover flow’ effect.

How to use it:

Include the prefixfree.min.js for CSS3 vendor fixes (Recommended).

<script src="prefixfree.min.js"></script>

Insert a group of images for the slideshow into a Html list as below.

<ul>
  <li><img src="https://lorempixel.com/200/200/sports"></li>
  <li><img src="https://lorempixel.com/200/200/people"></li>
  <li><img src="https://lorempixel.com/200/200/cats"></li>
  <li><img src="https://lorempixel.com/200/200/fashion"></li>
  ...
</ul>

The core CSS to style the slideshow.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 200px;
  display: inline-block;
  position: relative;
}
li {
  position: absolute;
  top: 0;
  left: 0;
  animation: coverflow 4s ease both infinite;
}
li:nth-child(2) {
  animation-delay: 1s;
}
li:nth-child(3) {
  animation-delay: 2s;
}
li:nth-child(4) {
  animation-delay: 3s;
}
img {
  border-radius: 50%;
  border: 2px solid white;
}

Create the cover flow animations using CSS3 keyframes & transforms.

@keyframes 
coverflow {  0%, 10% {
 opacity: 1;
 transform: none;
 z-index: 10;
}
 25%, 35% {
 opacity: 0.2;
 transform: translate3d(-170px, 0, 0) scale(0.6);
}
 50% {
 opacity: 0;
 transform: translate3d(-190px, 0, 0) scale(0.6);
}
 60% {
 opacity: 0;
 transform: translate3d(190px, 0, 0) scale(0.6);
}
 75%, 85% {
 opacity: 0.2;
 transform: translate3d(170px, 0, 0) scale(0.6);
}
}