Introdução a animação com CSS3
Autor: Ana Paula Miranda | Publicado: 2014-08-22T16:57:00-03:00

A CSS3 nos ajuda com algumas animações para Web. Vamos ver suas propriedades e como podemos usá-las.


- animation-duration: especifica quanto tempo uma animação leva para completar um ciclo.

Ex:&nbsp;div&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration:&nbsp;2s;&nbsp;/* Chrome, Safari, Opera */&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; animation-duration:&nbsp;2s;

}



- animation-timing-function: especifica como a animação irá se comportar na questão de velocidade.

Ex:&nbsp;div&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function:&nbsp;linear;&nbsp;/* Chrome, Safari, Opera */&nbsp;&nbsp;&nbsp;&nbsp;animation-timing-function:&nbsp;linear;

}




Para essa propriedade temos os seguintes valores:linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit;






- animation-delay: determina quanto tempo a animação leva para iniciar.

Ex:&nbsp;div&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-delay:&nbsp;2s;&nbsp;/* Chrome, Safari, Opera */&nbsp;&nbsp;&nbsp;&nbsp;animation-delay:&nbsp;2s;
}



Valores negativos são permitidos, -5s, a animação iniciará no tempo de 5s, por exemplo.



- animation-iteration-count: determina quantas vezes a animação irá acontecer.

Ex:&nbsp;div&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count:&nbsp;3;&nbsp;/* Chrome, Safari, Opera */&nbsp;&nbsp;&nbsp;&nbsp;animation-iteration-count:&nbsp;3;

}



- animation-direction:&nbsp;especifica a direção da animação.

Ex:&nbsp;div&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-direction:&nbsp;alternate;&nbsp;/* Chrome, Safari, Opera */&nbsp;&nbsp;&nbsp;&nbsp;animation-direction:&nbsp;alternate;

}



Para essa propriedade temos os seguintes valores:&nbsp;normal|reverse|alternate|alternate-reverse|initial|inherit;







- animation-play-state:&nbsp;especifica se a animação está em pausa ou em execução.

Ex:div&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-play-state:&nbsp;paused;&nbsp;/* Chrome, Safari, Opera */&nbsp;&nbsp;&nbsp;&nbsp;animation-play-state:&nbsp;paused;

}




Veja um exemplo do código de uma animação funcionando:












#animando{
 
width:200px;
height:200px;
background:red;
position:relative;
border-radius:100%;

-webkit-animation-name: anima;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
   
animation-name: anima;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
 
}

@-webkit-keyframes anima {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}


@keyframes anima {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}