Animación de un DIV con CSS3
Crear una animación simple con CSS3 es muy simple. En este caso, se trata de un div que se mueve de un punto a otro y regresa. Además lo hace girando y en bucle.
HTML:
<html> <div id="anima"></div> </html>
CSS:
#anima{ height:100px; width:100px; position:relative; background:#A7C265; -webkit-animation:desplaza 3s alternate infinite; animation: desplaza 3s alternate infinite; } @-webkit-keyframes desplaza { 0% {top: 0px; left: 0px;-webkit-transform: rotate(0deg);} 50% {top: 0px; left: 100px; -webkit-transform: rotate(180deg);} 100% {top: 0px; left:200px; -webkit-transform: rotate(360deg);} } @keyframes desplaza { 0% {top: 0px; left: 0px;-webkit-transform: rotate(0deg);} 50% {top: 0px; left: 100px; -webkit-transform: rotate(180deg);} 100% {top: 0px; left:200px; -webkit-transform: rotate(360deg);} }
El resultado sería este: