Introdução a animação com CSS3

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: div {

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

}


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


Ex: div {


    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: 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: div {

    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation-delay: 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: div {

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

}


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

Ex: div {

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

}

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



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

Ex:div {

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

}


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





Comentários

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Letras entrelaçadas no Photoshop CS4