martinkean · July 4, 2016 06:16
diff --git a/dabblet.css b/dabblet.css
 /**
 * Ball
 */

 /* 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 */

 body {margin: 6em 10%; background:#493F5B;}				
 .ball { 
 	position: absolute; 
 	top: 400px; 
 	background: url(http://martinkean.com/kidscon/ball/ball2.png) no-repeat;    
 	width: 111px;    
 	height: 111px;	
 	animation-name: bouncing-ball;	
 	animation-duration: 2s;	
 	animation-iteration-count: infinite;    
 	animation-fill-mode: both;     
 	animation-direction: alternate;}
 	
 @keyframes bouncing-ball {    
 	0% {transform: translateY(-200px) rotate(2turn); animation-timing-function: ease-in;}	
 	100% {transform:translateY(0px) rotate(.5turn); animation-timing-function: ease-out;}
 	}
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <div class="ball"></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"}
	/**
	* Ball
	*/

	/* 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 */

	body {margin: 6em 10%; background:#493F5B;}
	.ball {
	position: absolute;
	top: 400px;
	background: url(http://martinkean.com/kidscon/ball/ball2.png) no-repeat;
	width: 111px;
	height: 111px;
	animation-name: bouncing-ball;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-direction: alternate;}

	@keyframes bouncing-ball {
	0% {transform: translateY(-200px) rotate(2turn); animation-timing-function: ease-in;}
	100% {transform:translateY(0px) rotate(.5turn); animation-timing-function: ease-out;}
	}
	<!-- content to be placed inside <body>…</body> -->

	<div class="ball"></div>