animacion-1.0
Vaya este es una especie de experimento para conocer los límites del HTML5 y CSS3, en este caso dibujando sin hacer uso del canvas y luego animando!

Esto funciona bien en Firefox y Chrome, talves IE10 (alguien me ayuda a verificar?)

La idea es digujar el clásico monito con baceza de círculo, cuerpo, brazos y piernas con una línea y bueno el reto es ya que no estoy usando el canvas.

La idea es usar puros DIV’s, con la finalidad de posteriormente poder colocar texturas por medio de imagenes de fondo, pero eso será en otra ocasión.

Creo que primero debería de animar una caja simple, pero hay que pensar en grande!!

Maketado a la obra…

Después de unos momentos he logrado obtener lo siguiente:

<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Ricardo Torres">
<title>Animación</title>
<style type="text/css">
	div#contenedor {
		width: 700px;
		height: 700px;
		margin: 0 auto;
		border: 1px solid #333;
		position: relative;
	}
	
	.cabeza {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		border: 2px solid #333;
		position: absolute;
		top: 50px;
		left: 50px;
	}
	
	.cuerpo {
		width: 0px;
		height: 200px;
		border: 2px solid #333;
		position: relative;
		left: 50%;
		right: 50%;
		top: 100px;
	}
	
	.brazo_izq {
		width: 150px;
		height: 0px;
		border: 2px solid #333;
		position: absolute;;
		left: 50px;
		top: 130px;
		transform:	rotate(60deg);
		transform-origin: left bottom;
		-ms-transform:	rotate(60deg);
		-ms-transform-origin: left bottom;
		-webkit-transform: rotate(60deg);
		-webkit-transform-origin: left bottom;
	}

	.brazo_der {
		width: 150px;
		height: 0px;
		border: 2px solid #333;
		position: absolute;;
		right: 46px;
		top: 130px;
		transform:	rotate(-60deg);
		transform-origin: right bottom;
		-ms-transform:	rotate(-60deg);
		-ms-transform-origin: right bottom;
		-webkit-transform: rotate(-60deg);
		-webkit-transform-origin: right bottom;
	}

	.pierna_izq {
		width: 150px;
		height: 0px;
		border: 2px solid #333;
		position: absolute;;
		left: 50px;
		top: 300px;
		transform:	rotate(60deg);
		transform-origin: left bottom;
		-ms-transform:	rotate(60deg);
		-ms-transform-origin: left bottom;
		-webkit-transform: rotate(60deg);
		-webkit-transform-origin: left bottom;
	}

	.pierna_der {
		width: 150px;
		height: 0px;
		border: 2px solid #333;
		position: absolute;;
		right: 46px;
		top: 300px;
		transform:	rotate(-60deg);
		transform-origin: right bottom;
		-ms-transform:	rotate(-60deg);
		-ms-transform-origin: right bottom;
		-webkit-transform: rotate(-60deg);
		-webkit-transform-origin: right bottom;
	}
	
	@keyframes corre {
		0%		{
					transform: scale(0.5);
				}

		33%	{
					transform: rotate(30deg) scale(0.5);
					transform-origin: center 150px;
				}
		85%	{
					transform: rotate(30deg) scale(0.5);
					transform-origin: center 150px;
					left: 600px;
				}
		100%	{
					transform: rotate(720deg) scale(0.5);
					transform-origin: center 150px;
					left: 600px;
				}
	}
	
	@-webkit-keyframes corre {
		0%		{
					-webkit-transform: scale(0.5);
				}

		33%	{
					-webkit-transform: rotate(30deg) scale(0.5);
					-webkit-transform-origin: center 150px;
				}
		85%	{
					-webkit-transform: rotate(30deg) scale(0.5);
					-webkit-transform-origin: center 150px;
					left: 600px;
				}
		100%	{
					-webkit-transform: rotate(720deg) scale(0.5);
					-webkit-transform-origin: center 150px;
					left: 600px;
				}
	}
	
	.cabeza {
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		animation: corre 3s;
		-webkit-animation: corre 3s;
	}	
</style>
</head>
<body>
	<div id="contenedor">
		<section class="cabeza">
			<div class="cuerpo"></div>
			<div class="brazo_izq"></div>
			<div class="brazo_der"></div>
			<div class="pierna_izq"></div>
			<div class="pierna_der"></div>
		</section>
	</div>
</body>
</html>

el resultado es muy agradable, mi personaje simplemente rompe la barrera del sonido de lo rápido que se desplaza y además puedo mover todo mi personaje como un sólo objeto.

Me gustaría ponerle texturas o piel o… la ideas comienzan a surgir!

Si tienen sobrinos (como en mi caso) creo que una buena opción es poner a los pequeños a que pinten sus propios personajes!