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: