Untitled

dabblet.css

body {
  margin: 0;
}	
	
.header {
  margin: 0 0 30px;
  background: url(http://www.red-team-design.com/wp-content/uploads/2011/12/header-bg.png);
  background: url(http://www.red-team-design.com/wp-content/uploads/2011/12/snow-bg.png) repeat-y center, url(http://www.red-team-design.com/wp-content/uploads/2011/12/header-bg.png);
  -webkit-animation: animate-snow 9s linear infinite;
  -moz-animation: animate-snow 9s linear infinite;
  -ms-animation: animate-snow 9s linear infinite;
  animation: animate-snow 9s linear infinite;
}

@-webkit-keyframes animate-snow {
  0% { background-position: center 0, 0 0;}
  100% { background-position: center 885px, 0 0;}
}
@-moz-keyframes animate-snow {
  0% { background-position: center 0, 0 0;}
  100% { background-position: center 885px, 0 0;}
}
@-ms-keyframes animate-snow {
  0% { background-position: center 0, 0 0;}
  100% { background-position: center 885px, 0 0;}
}		
@keyframes animate-snow {
  0% { background-position: center 0, 0 0;}
  100% { background-position: center 885px, 0 0;}
}	

.wrapper {
  width: 960px;
  height: 315px;
  margin: auto;
  overflow: hidden;
  position: relative;
  background: url(http://www.red-team-design.com/wp-content/uploads/2011/12/wrapper-bg.png) no-repeat bottom;
}	
 
@-moz-keyframes animate-drop {
  0% {opacity:0;-moz-transform: translate(0, -315px);}
  100% {opacity:1;-moz-transform: translate(0, 0);}
}
@-webkit-keyframes animate-drop {
  0% {opacity:0;-webkit-transform: translate(0, -315px);}
  100% {opacity:1;-webkit-transform: translate(0, 0);}
}
@-ms-keyframes animate-drop {
  0% {opacity:0;-ms-transform: translate(0, -315px);}
  100% {opacity:1;-ms-transform: translate(0, 0);}
}
@keyframes animate-drop {
  0% {opacity:0;transform: translate(0, -315px);}
  100% {opacity:1;transform: translate(0, 0);}
}  	
    
.christmas-tree, .snowman {
  position: absolute;
  -moz-animation: animate-drop 1s linear;
  -webkit-animation: animate-drop 1s linear;
  -ms-animation: animate-drop 1s linear;
  animation: animate-drop 1s linear;
}	
.christmas-tree {
  width: 112px;
  height: 137px;
  background: url(http://www.red-team-design.com/wp-content/uploads/2011/12/christmas-tree.png);
}
.snowman {
  width: 115px;
  height: 103px;
  top: 195px;
  left: 415px;
  background: url(http://www.red-team-design.com/wp-content/uploads/2011/12/snowman.png);
  -moz-animation-duration: .6s;
  -webkit-animation-duration: .6s;
  -ms-animation-duration: .6s;
  animation-duration: .6s;
}
.tree1 { 
  top: 165px;
  left: 95px;
  -moz-animation-duration: .6s;
  -webkit-animation-duration: .6s;
  -ms-animation-duration: .6s;
  animation-duration: .6s;
}
.tree2 { left: 185px; top: 125px; -moz-animation-duration: .9s;	-webkit-animation-duration: .9s; -ms-animation-duration: .9s; animation-duration: .9s; }
.tree3 {        left: 240px;        top: 175px;			-moz-animation-duration: .7s;		-webkit-animation-duration: .7s;		-ms-animation-duration: .7s;		animation-duration: .7s;		    }    
.tree4 {        left: 340px;        top: 155px;			-moz-animation-duration: .8s;		-webkit-animation-duration: .8s;		-ms-animation-duration: .8s;		animation-duration: .8s;		    }	    
.tree5 {        left: 510px;        top: 125px;			-moz-animation-duration: .7s;		-webkit-animation-duration: .7s;		-ms-animation-duration: .7s;		animation-duration: .7s;		    }	    
.tree6 {        left: 585px;        top: 170px;			-moz-animation-duration: .6s;		-webkit-animation-duration: .6s;		-ms-animation-duration: .6s;		animation-duration: .6s;		    }
.tree7 {        left: 655px;        top: 135px;			-moz-animation-duration: .6s;		-webkit-animation-duration: .6s;		-ms-animation-duration: .6s;		animation-duration: .6s;		    }
.tree8 {        left: 735px;        top: 175px;			-moz-animation-duration: .6s;		-webkit-animation-duration: .6s;		-ms-animation-duration: .6s;		animation-duration: .6s;		    }

dabblet.html

<div class="header">
  <div class="wrapper">
    <div class="christmas-tree tree1"></div>
    <div class="christmas-tree tree2"></div>
    <div class="christmas-tree tree3"></div>
    <div class="snowman"></div>
    <div class="christmas-tree tree4"></div>
    <div class="christmas-tree tree5"></div>
    <div class="christmas-tree tree6"></div>
    <div class="christmas-tree tree7"></div>
    <div class="christmas-tree tree8"></div>
  </div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}