Untitled

dabblet.css

@keyframes cf4FadeInOut {
  0% {
    opacity:1;
    -webkit-transform:rotate(0deg);
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
    -webkit-transform:rotate(2deg) scale(1.1);    

  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.slideshow li:nth-of-type(1) {
  animation-delay: 6s;
}
.slideshow li:nth-of-type(2) {
  animation-delay: 4s;
}
.slideshow li:nth-of-type(3) {
  animation-delay: 2s;
}
.slideshow li:nth-of-type(4) {
  animation-delay: 0;
}

ul.slideshow {
	list-style: none;
}

ul.slideshow li {
	display:block;
	width:600px;
	height:600px;
	position:absolute;
	animation: cf4FadeInOut 8s infinite;
}

ul.slideshow li:nth-child(1) {
	opacity: 0;
	background:url(http://project.pawthemes.com/paw-vcard/images/5.jpg);
}

ul.slideshow li:nth-child(2) {
	opacity: 0;
	background:url(http://project.pawthemes.com/paw-vcard/images/6.jpg);
}

ul.slideshow li:nth-child(3) {
	opacity: 0;
	background:url(http://project.pawthemes.com/paw-vcard/images/5.jpg);
}

ul.slideshow li:nth-child(4) {
	opacity: 0;
	background:url(http://project.pawthemes.com/paw-vcard/images/6.jpg);
}

dabblet.html

<ul class="slideshow">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}