spinning cogs retina

dabblet.css

/**
 * spinning cogs retina
 * 
 * img: https://dl.dropbox.com/u/31132753/hcogs.png
 *
 */

.cnt{width:900px; height:450px; position:relative; background-color:grey;}

/* --------------------- *\ 
	$cogs
\* --------------------- */
.cog{
	display:block;
	width:182px;
	height:182px;
	background-size:1000px 687px;
	background-image: url('https://dl.dropbox.com/u/31132753/hcogs-retina.png');
	background-repeat:norepeat;
	position: absolute;
}
.red{
	background-position:-10px -91px;
	bottom:110px;left:550px;
	-webkit-animation: rotate-back 9000ms linear infinite;	
}
.green{
	background-position:-205px -90px;
	bottom:135px; left:305px;
	-webkit-animation: rotate-back 9000ms linear infinite;	
}
.blue{
	background-position:-401px -91px;
	bottom:5px; left:415px;
	-webkit-animation: rotate 9000ms linear infinite;	
}
.purple{
	background-position:-795px -91px;
	bottom:250px; left:649px;
	-webkit-animation: rotate 9000ms linear infinite;	
}
.yellow{
	background-position:-596px -90px;
	bottom:60px; left:715px;
	-webkit-animation: rotate 9000ms linear infinite;	
}
.grey{
	background-position:-11px -323px; 
	width:314px; height:314px;
	bottom:45px; left:5px;
	-webkit-animation: rotate 18000ms linear infinite;
}

/* --------------------- *\ 
	$content
\* --------------------- */
.cog-content{
	background-image: url('https://dl.dropbox.com/u/31132753/hcogs.png');
	background-repeat: no-repeat;
	position:absolute;
}
.bp-bg{
	background-position: -365px -257px;	
	width: 177px; height: 100px;
	bottom:140px; left:75px;	
}
.social-bg{
	background-position: -567px -257px;
	width: 54px; height: 65px;
	bottom:303px; left:712px;
}
.onlinepr-bg{
	background-position: -645px -255px;
	width: 80px; height: 67px;
	bottom:110px; left:765px;
}
.ppc-bg{
	background-position: -747px -255px;
	width: 30px; height: 54px;
	bottom:70px; left:490px;

}
.reporting-bg{
	background-position: -796px -257px;
	width: 86px; height: 72px;
	bottom:152px;left:597px;

}
.seo-bg{
	background-position: -917px -257px;
	width: 55px; height: 69px;
	bottom:190px; left:372px;
}

/* --------------------- *\ 
	$animations
\* --------------------- */


/*rotate*/
@keyframes "rotate" {
 from {
    -webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	-o-transform: rotate(0deg);
   	-ms-transform: rotate(0deg);
   	transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(360deg);
   	-moz-transform: rotate(360deg);
   	-o-transform: rotate(360deg);
   	-ms-transform: rotate(360deg);
   	transform: rotate(360deg);
 }
}

@-moz-keyframes rotate {
 from {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}

@-webkit-keyframes "rotate" {
 from {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}

@-ms-keyframes "rotate" {
 from {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}

@-o-keyframes "rotate" {
 from {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}
/*rotate-back*/
@keyframes "rotate-back" {
 from {
    -webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	-o-transform: rotate(0deg);
   	-ms-transform: rotate(0deg);
   	transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(-360deg);
   	-moz-transform: rotate(-360deg);
   	-o-transform: rotate(-360deg);
   	-ms-transform: rotate(-360deg);
   	transform: rotate(-360deg);
 }
}

@-moz-keyframes rotate-back {
 from {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -moz-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }
}

@-webkit-keyframes "rotate-back" {
 from {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -webkit-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }
}


@-ms-keyframes "rotate-back" {
 from {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -ms-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }
}

@-o-keyframes "rotate-back" {
 from {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -o-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }
}

dabblet.html

<div class="cnt">
	<div class="cog-content bp-bg"></div>
	<div class="cog-content ppc-bg"></div>
	<div class="cog-content social-bg"></div>
	<div class="cog-content onlinepr-bg"></div>
	<div class="cog-content reporting-bg"></div>
	<div class="cog-content seo-bg"></div>

	<div class="cog grey"></div>
	<div class="cog red"></div>
	<div class="cog green"></div>
	<div class="cog blue"></div>
	<div class="cog purple"></div>
	<div class="cog yellow"></div>
</div>

settings.json

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