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


73 + = 76