Controler une animation CSS3

dabblet.css

/**
 * Controler une animation CSS3
 */


body {
	background: #003366;
	font-family: "comic sans ms";
}
#nyancat {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 50%; left: 50%;
	margin-left: -200px; margin-top: -200px;
	background: url(http://lipelip.be/playground/nyancat/nyancat.jpg);
}

/* SOME MORE WORK NEEDED HERE */

.animation {
	-webkit-animation: animation 1s infinite;
	-moz-animation: animation 1s infinite;
	-ms-animation: animation 1s infinite;
	-o-animation: animation 1s infinite;
	animation: animation 1s infinite;
}

@-webkit-keyframes animation {
	0%, 8.32% { background-position: 0px 0px; }
	8.33%, 16.66% { background-position: 0px -400px; }
	16.67%, 24.99% { background-position: 0px -800px; }
	25%, 33.32% { background-position: 0px -1200px; }
	33.33%, 41.66% { background-position: 0px -1600px; }
	41.67%, 49.99% { background-position: 0px -2000px; }
	50%, 58.32% { background-position: 0px -2400px; }
	58.33%, 66.66% { background-position: 0px -2800px; }
	66.67%, 74.99% { background-position: 0px -3200px; }
	75%, 83.32% { background-position: 0px -3600px; }
	83.33%, 91.66% { background-position: 0px -4000px; }
	91.67%, 100% { background-position: 0px -4400px; }
}

@-moz-keyframes animation {
	0%, 8.32% { background-position: 0px 0px; }
	8.33%, 16.66% { background-position: 0px -400px; }
	16.67%, 24.99% { background-position: 0px -800px; }
	25%, 33.32% { background-position: 0px -1200px; }
	33.33%, 41.66% { background-position: 0px -1600px; }
	41.67%, 49.99% { background-position: 0px -2000px; }
	50%, 58.32% { background-position: 0px -2400px; }
	58.33%, 66.66% { background-position: 0px -2800px; }
	66.67%, 74.99% { background-position: 0px -3200px; }
	75%, 83.32% { background-position: 0px -3600px; }
	83.33%, 91.66% { background-position: 0px -4000px; }
	91.67%, 100% { background-position: 0px -4400px; }
}
@-ms-keyframes animation {
	0%, 8.32% { background-position: 0px 0px; }
	8.33%, 16.66% { background-position: 0px -400px; }
	16.67%, 24.99% { background-position: 0px -800px; }
	25%, 33.32% { background-position: 0px -1200px; }
	33.33%, 41.66% { background-position: 0px -1600px; }
	41.67%, 49.99% { background-position: 0px -2000px; }
	50%, 58.32% { background-position: 0px -2400px; }
	58.33%, 66.66% { background-position: 0px -2800px; }
	66.67%, 74.99% { background-position: 0px -3200px; }
	75%, 83.32% { background-position: 0px -3600px; }
	83.33%, 91.66% { background-position: 0px -4000px; }
	91.67%, 100% { background-position: 0px -4400px; }
}
@-o-keyframes animation {
	0%, 8.32% { background-position: 0px 0px; }
	8.33%, 16.66% { background-position: 0px -400px; }
	16.67%, 24.99% { background-position: 0px -800px; }
	25%, 33.32% { background-position: 0px -1200px; }
	33.33%, 41.66% { background-position: 0px -1600px; }
	41.67%, 49.99% { background-position: 0px -2000px; }
	50%, 58.32% { background-position: 0px -2400px; }
	58.33%, 66.66% { background-position: 0px -2800px; }
	66.67%, 74.99% { background-position: 0px -3200px; }
	75%, 83.32% { background-position: 0px -3600px; }
	83.33%, 91.66% { background-position: 0px -4000px; }
	91.67%, 100% { background-position: 0px -4400px; }
}
@keyframes animation {
	0%, 8.32% { background-position: 0px 0px; }
	8.33%, 16.66% { background-position: 0px -400px; }
	16.67%, 24.99% { background-position: 0px -800px; }
	25%, 33.32% { background-position: 0px -1200px; }
	33.33%, 41.66% { background-position: 0px -1600px; }
	41.67%, 49.99% { background-position: 0px -2000px; }
	50%, 58.32% { background-position: 0px -2400px; }
	58.33%, 66.66% { background-position: 0px -2800px; }
	66.67%, 74.99% { background-position: 0px -3200px; }
	75%, 83.32% { background-position: 0px -3600px; }
	83.33%, 91.66% { background-position: 0px -4000px; }
	91.67%, 100% { background-position: 0px -4400px; }
}



#play:checked ~ #nyancat {
	-webkit-animation-play-state: running;
}
#stop:checked ~ #nyancat {
	-webkit-animation-play-state: paused;
}
ul {
	list-style: none;
	padding: 0;
	position: absolute;
	left: 50%;
	margin-left: -67px;
}	ul li { float: left; margin: 0 10px; }
label {
	display: inline-block;
	padding: 5px 10px;
	background: #FAFAFA;
	border-radius: 4px;
	cursor: pointer;
}	

input { display: none; visibility: hidden; } 
	
#play:checked ~ul li label[for=play], #stop:checked ~ul li label[for=stop] { background: blue;}

dabblet.html

<input type="radio" checked="checked" name="nyancat" id="play" />
<input type="radio" name="nyancat" id="stop" />

<div id="nyancat" class="animation"></div>

<ul>
	<li>
		<label for="play">Play</label>
	</li>
	<li>
		<label for="stop">Stop</label>
	</li>
</ul>			

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}