animation with sprites (explosion)

dabblet.css

/**
 * animation with sprites (explosion)
 */
 
 @keyframes ninja {
	0% { background-position: -0px 0px;}
	1.99% { background-position: -0px 0px;}
	2% { background-position: -89px 0px;}
	3.99% { background-position: -89px 0px;}
	4% { background-position: -178px 0px;}
	5.99% { background-position: -178px 0px;}
	6% { background-position: -267px 0px;}
	7.99% { background-position: -267px 0px;}
	8% { background-position: -356px 0px;}
	9.99% { background-position: -356px 0px;}
	10% { background-position: -445px 0px;}
	11.99% { background-position: -445px 0px;}
	12% { background-position: -534px 0px;}
	13.99% { background-position: -534px 0px;}
	14% { background-position: -623px 0px;}
	16.99% { background-position: -623px 0px;}
	17% { background-position: -712px 0px;}
	18.99% { background-position: -712px 0px;}
	19% { background-position: -801px 0px;}
	20.99% { background-position: -801px 0px;}
	21% { background-position: -890px 0px;}
	22.99% { background-position: -890px 0px;}
	23% { background-position: -979px 0px;}
	24.99% { background-position: -979px 0px;}
	25% { background-position: -1068px 0px;}
	26.99% { background-position: -1068px 0px;}
	27% { background-position: -1157px 0px;}
	28.99% { background-position: -1157px 0px;}
	29% { background-position: -1246px 0px;}
	30.99% { background-position: -1246px 0px;}
	31% { background-position: -1335px 0px;}
	33.99% { background-position: -1335px 0px;}
	34% { background-position: -1424px 0px;}
	35.99% { background-position: -1424px 0px;}
	36% { background-position: -1513px 0px;}
	37.99% { background-position: -1513px 0px;}
	38% { background-position: -1602px 0px;}
	39.99% { background-position: -1602px 0px;}
	40% { background-position: -1691px 0px;}
	41.99% { background-position: -1691px 0px;}
	42% { background-position: -1780px 0px;}
	43.99% { background-position: -1780px 0px;}
	44% { background-position: -1869px 0px;}
	45.99% { background-position: -1869px 0px;}
	46% { background-position: -1958px 0px;}
	47.99% { background-position: -1958px 0px;}
	48% { background-position: -2047px 0px;}
	50.99% { background-position: -2047px 0px;}
	51% { background-position: -2136px 0px;}
	52.99% { background-position: -2136px 0px;}
	53% { background-position: -2225px 0px;}
	54.99% { background-position: -2225px 0px;}
	55% { background-position: -2314px 0px;}
	56.99% { background-position: -2314px 0px;}
	57% { background-position: -2403px 0px;}
	58.99% { background-position: -2403px 0px;}
	59% { background-position: -2492px 0px;}
	60.99% { background-position: -2492px 0px;}
	61% { background-position: -2581px 0px;}
	62.99% { background-position: -2581px 0px;}
	63% { background-position: -2670px 0px;}
	64.99% { background-position: -2670px 0px;}
	65% { background-position: -2759px 0px;}
	67.99% { background-position: -2759px 0px;}
	68% { background-position: -2848px 0px;}
	69.99% { background-position: -2848px 0px;}
	70% { background-position: -2937px 0px;}
	71.99% { background-position: -2937px 0px;}
	72% { background-position: -3026px 0px;}
	73.99% { background-position: -3026px 0px;}
	74% { background-position: -3115px 0px;}
	75.99% { background-position: -3115px 0px;}
	76% { background-position: -3204px 0px;}
	77.99% { background-position: -3204px 0px;}
	78% { background-position: -3293px 0px;}
	79.99% { background-position: -3293px 0px;}
	80% { background-position: -3382px 0px;}
	81.99% { background-position: -3382px 0px;}
	82% { background-position: -3471px 0px;}
	84.99% { background-position: -3471px 0px;}
	85% { background-position: -3560px 0px;}
	86.99% { background-position: -3560px 0px;}
	87% { background-position: -3649px 0px;}
	88.99% { background-position: -3649px 0px;}
	89% { background-position: -3738px 0px;}
	90.99% { background-position: -3738px 0px;}
	91% { background-position: -3827px 0px;}
	92.99% { background-position: -3827px 0px;}
	93% { background-position: -3916px 0px;}
	94.99% { background-position: -3916px 0px;}
	95% { background-position: -4005px 0px;}
	96.99% { background-position: -4005px 0px;}
	97% { background-position: -4093px 0px;}
	98.99% { background-position: -409px 0px;}
	100% { background-position: -4093px 0px;}
}


.item {
  margin-top:200px;
  margin-left:100px;
  width: 89px;
  height: 103px;
  background-color:black;
  color:white;
  line-height:103px;
  text-align:center;
}

.item:hover {
  background-image: url(http://www.nielsdoorn.nl/wp-content/uploads/2012/01/explosion_46FR.png);
  animation-name: ninja;  
  animation-iteration-count: infinite;  
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

dabblet.html

<div class="item">Hover me!</div>

settings.json

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