A Pen by Melanie Sumner.

index.html

<div class="container">
  <h2 class="page-header">
    Rotating Image Demo
  </h2>
  <p class="lead">
    This demonstrates how you can rotate a set of images via css animation as seen in "Lightbox Workshop," a feature in Web Designer magazine, issue 223. Images purchased from Creative Market as part of stock image package. 
  </p>
</div>
<div class="container">
<div class="carousel-five-images center-block">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/001.jpg" class="one" />
  
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/002.jpg" class="two changing" />
  
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/003.jpg" class="three changing" />
  
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/002.jpg" class="four changing" />
  
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/005.jpg" class="five changing" />
 
</div>
</div>

Shuffle-between-page-images.markdown

Shuffle between page images

Shuffle between page images with animated states. From Web Designer Magazine, Issue 223.

A Pen by Melanie Sumner on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
 }
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  line-height: 1em;
}
.container {
  width: 60%;
}
img {
  display:block;
}

.carousel-five-images{
	position: relative;
  top: 1em;
  left: 15%;
  /* Can be anything, but must be defined */
}
.carousel-five-images .changing {
	position:absolute;
	opacity:0;
	top:0;
	left:0;
}
.carousel-five-images .two{
	animation:animate-five-two 15s infinite forwards linear;
	/* Change the 4s (4 seconds) to variable animation duration */
}
.carousel-five-images .three{
	animation:animate-five-three 15s infinite forwards linear;
}
.carousel-five-images .four{
	animation:animate-five-four 15s infinite forwards linear;
}
.carousel-five-images .five{
	animation:animate-five-five 15s infinite forwards linear;
}

@keyframes animate-five-two
{
    0%	{opacity:0;}
    15% {opacity:0;}
    20% {opacity:1;}
    90% {opacity:1;}
    95% {opacity:0;}
}
@keyframes animate-five-three
{
    0% {opacity:0;}
    35% {opacity:0;}
    40% {opacity:1;}
    90% {opacity:1;}
    95% {opacity:0;}
}
@keyframes animate-five-four
{
    0% {opacity:0;}
    55% {opacity:0;}
    60% {opacity:1;}
    90% {opacity:1;}
    95% {opacity:0;}
}
@keyframes animate-five-five
{
    0% {opacity:0;}
    75% {opacity:0;}
    80% {opacity:1;}
    95% {opacity:1;}
    100% {opacity:0;}
}