martinkean · July 4, 2016 06:12
diff --git a/dabblet.css b/dabblet.css
 /**
 * Walker
 */
 
 /* These exercises are for teaching purposes only. */
 /* With thanks to Val Head and Lynda.com for providing the code and images http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html */

 .sprite {
 	width:500px;
 	height:500px;
 	display:block;		
 	background:transparent url(http://martinkean.com/kidscon/walker/walker_frames.png) 0 0 no-repeat;	
 	margin:3em auto;
 	//animation: walker 2s steps(10) infinite;
 }
 	
 @keyframes walker {	
 	0% {background-position: 0 0;}	
 	100% {background-position: 0 -5000px;}
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <div class="sprite"></div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Walker
	*/

	/* These exercises are for teaching purposes only. */
	/* With thanks to Val Head and Lynda.com for providing the code and images http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html */

	.sprite {
	width:500px;
	height:500px;
	display:block;
	background:transparent url(http://martinkean.com/kidscon/walker/walker_frames.png) 0 0 no-repeat;
	margin:3em auto;
	//animation: walker 2s steps(10) infinite;
	}

	@keyframes walker {
	0% {background-position: 0 0;}
	100% {background-position: 0 -5000px;}
	}
	<!-- content to be placed inside <body>…</body> -->

	<div class="sprite"></div>