Animación simple

dabblet.css

div#simple {    
	width: 50px;    
	height: 50px;    
	background-color: red;    
	position: absolute;	text-align:center;	
	padding-top: 1%;	
	color:#FFF;	font-weight:bold;     
	
	-moz-animation-name: simple-animation;    
	-moz-animation-duration: 5s;    
	-moz-animation-delay: 0s;    
	-moz-animation-iteration-count: 10;    
	-moz-animation-timing-function: ease-out; 
	
	/* rápido al principio lento al final */    
	-moz-animation-direction: normal;     
	-webkit-animation-name: simple-animation;    
	-webkit-animation-duration: 5s;    
	-webkit-animation-delay: 0s;    
	-webkit-animation-iteration-count: 10;    
	-webkit-animation-timing-function: ease-in-out;    
	-webkit-animation-direction: normal;
	
} 

@-moz-keyframes simple-animation {    
	0% {        
		left: 0;    
	}
	    
	50% {
		left: 200px;		
		bottom:300px;		
		height: 150px;        
		background-color: blue;    
	}     
	100% {
        left: 400px;
		height: 150px;
		width:150px;
	}
}

@-webkit-keyframes simple-animation {    
	0% {
		left: 0;    
	}     
	
	50% {        
		left: 200px;		
		bottom:300px;        
		background-color: blue;    
	}     
	
	100% {        
		left: 400px;    
	}
}

dabblet.html

<div id="simple">1</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}