Animación de un DIV con CSS3

Animación de un DIV con CSS3

Programador

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:

 

 

 

Fuente: http://www.w3schools.com/css/css3_animations.asp

Escribe una respuesta