Shuffle between page images with animated states. From Web Designer Magazine, Issue 223.
A Pen by Melanie Sumner on CodePen.
<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 with animated states. From Web Designer Magazine, Issue 223.
A Pen by Melanie Sumner on CodePen.
@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;} | |
} |