Falling Leaves with CSS Only

dabblet.css

/*
	Falling Leaves with CSS Only
	http://premiumcoding.com/css3-tricks-falling-leaves-css/
*/

.container{
	top:0px;
	background:#fff;
	width:100%;
	height:100%;
	position:absolute;
	left:0%;
	background:#1E1E20 url(http://premiumcoding.com/CSSTricks/fallingLeaves/autumn.jpg) center top no-repeat;
	overflow: hidden;

}

.loader {
    text-align: center;
}
.loader span {
    display: inline-block;
    width: 80px;
    height: 80px;
	margin: -280px 40px 54px  -34px;

    background: #ff0000;
	background:url("http://premiumcoding.com/CSSTricks/fallingLeaves/leaf.png");
    
    -webkit-animation: loader 10s infinite  linear;
    -moz-animation: loader 10s infinite  linear;
}
.loader span:nth-child(5n+5) {

    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.loader span:nth-child(3n+2) {

    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
.loader span:nth-child(2n+5) {

    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}

.loader span:nth-child(3n+10) {

    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.loader span:nth-child(7n+2) {

    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.loader span:nth-child(4n+5) {

    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.loader span:nth-child(3n+7) {

    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
@-webkit-keyframes loader {
  0% {
    width: 80px;
    height: 80px;
    opacity: 1;

	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    width: 80px;
    height: 80px;
    opacity: 1;

	-webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;

	-webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}
@-moz-keyframes loader {
  0% {
    width: 80px;
    height: 80px;
    opacity: 1;
    
	-moz-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    width: 80px;
    height: 80px;
    opacity: 1;
   
	-moz-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    
	-moz-transform: translate(150px, 800px) rotateZ(360deg);
  }
}

dabblet.html

<div class="container">
	<div class="loader">
    	<span></span>
    	<span></span>
    	<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
    	<span></span>
    	<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
    	<span></span>
    	<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
    	<span></span>
    	<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}