<div class="slideshow">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/125423/Ribes_rubrum2005-07-17.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/125423/yellow-and-red-berry.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/125423/sloe.png">
</div>
body {
font-size: 100%;
background-color: #fff;
margin: 2em;
}
.slideshow {
position: relative;
width: 37.5em;
height: 28.125em;
background-color: #fff;
border: .125em solid #c6ce55;
padding: .5em;
margin: 0 auto;
}
.slideshow img {
position: absolute;
animation-name: fade-out;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.slideshow img:nth-child(1) {
animation-delay: 10s;
}
.slideshow img:nth-child(2) {
animation-delay: 5s;
}
.slideshow img:nth-child(3) {
animation-delay: 0s;
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Also see: Tab Triggers