Animaciones en CSS3 Definicin http://www.w3schools.com/css/css3_animations.

asp Necesitamos definir tanto los fotogramas clave como la animacin, aplicada a cualquier elemento css, para todos los navegadores Animacin de transicin @keyframes mymove { 0% {top:0px; left:0px;} 25% {top:0px; left:100px;} 50% {top:100px; left:100px;} 75% {top:100px; left:0px;} 100% {top:0px; left:0px;} } @-webkit-keyframes mymove { 0% {top:0px; left:0px;} 25% {top:0px; left:100px;} 50% {top:100px; left:100px;} 75% {top:100px; left:0px;} 100% {top:0px; left:0px;} } @-moz-keyframes mymove { 0% {top:0px; left:0px;} 25% {top:0px; left:100px;} 50% {top:100px; left:100px;} 75% {top:100px; left:0px;} 100% {top:0px; left:0px;} } Aplicado al canvas canvas { position: relative; animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; } Podemos utilizar la sintaxis alternativa from-to entre dos posiciones

@keyframes mymove { 0% {top:0px; left:0px;} 25% {top:0px; left:100px;} 50% {top:100px; left:100px;}

75% {top:100px; left:0px;} 100% {top:0px; left:0px;} } Animacin de opacidad @-webkit-keyframes mymove { from {top:0px; left:0px; opacity:0;} to {top:0px; left:100px;opacity:1;} } Animacin de rotacin Utilizamos el mtodo transform http://www.w3schools.com/css/css3_2dtransforms.asp @-webkit-keyframes mymove { from {-webkit-transform:rotate(0deg)} to {-webkit-transform:rotate(60deg)} } Animacin de escala @-webkit-keyframes mymove { from {-webkit-transform:scale(0)} to {-webkit-transform:rotate(7)} } Animacin de estiramiento @-webkit-keyframes mymove { from {-webkit-transform:skew(0deg)} to {-webkit-transform:skew(60deg)} }

Podemos visualizar diferentes ejemplos de animaciones con escala http://www.iamkumaran.com/browser-orbit-css3-animation-using-keyframes-and-transform/ Podemos tambin rotar en 3D @-webkit-keyframes mymove { from {-webkit-transform:rotateY(0deg)} to {-webkit-transform:rotateY(180deg)} }

@-webkit-keyframes mymove { from {-webkit-transform:rotateX(0deg)} to {-webkit-transform:rotateX(180deg)} }

Ejemplo http://www.nosolocss.com/blog/css/rotar-imagenes-en-3d-combinando-css3-transformrotate-y-keyframes Sirva esto de pequea introduccin al 3D en CSS3 http://desandro.github.io/3dtransforms/