Animação em CSS

Construção de animação em css
Nada como uma animação de um elemento numa página para que esta tenha um aspeto totalmente diferente. Ditado o fim do flash como recurso de produção de conteúdos animados para utilização na web, a transição para a animação css torna-se uma pedra fundamental na produção e desenvolvimento de um projeto online.
Como toda a animação, também a construção em CSS (Cascading Style Sheet) segue o principio de KEYFRAMES o que simplifica a sua utilização. Aqui a regra de “ouro” é a criação da animação css própriamente dita com a sua declaração: @keyframes.
Numa forma simples teriamos qualquer coisa deste género:
@keyframes nomeanimacao
{
from{background: blue;}
to {background: yellow;}
}

Nota:
atribuição de um nome à animação “nomeanimacao” e declaração das suas caracteristicas, neste exemplo, um ponto inicial com fundo azul, e um ponto final com fundo amarelo.
Garantir compatibilidade cross-browser em css:
Para utilização de keyframes em Firefox é necessário utilizar o prefixo – moz-. Para Chrome e Safari é necessário utilizar o prefixo – webkit- e em Opera o prefixo -0-.
Assim para uma declaração cross-browser teriamos:
@keyframes nomeanimacao
{
from{brackground: blue;}
to{background: yellow;}
}
@-moz-keyframes nomeanimacao
{
from{brackground: blue;}
to{background: yellow;}
}
@-webkit-keyframes nomeanimacao
{
from{brackground: blue;}
to{background: yellow;}
}
@-o-keyframes nomeanimacao
{
from{brackground: blue;}
to{background: yellow;}
}

Agora sim temos uma animação cross-browser declarada. Para que esta funcione à que invocar esta animação para um determinado elemento, como por exemplo uma div.
Aplicação de animação css a elemento div:
div
{
width:900px;
height:500px;
background:blue;
animation: nomeanimacao 10s;
-moz-animation: nomeanimacao 10s;
-webkit-animation: nomeanimacao 10s;
-o-animation: nomeanimacao 10s;
}

A ligação entre o elemento div e a animação é feita com a propriedade “animation: nomeanimacao 10s”, sendo que os “10s” ditam a duração desta animação, seja o tempo entre o “from” e o “to”, inicio/fim da animação.
Vários pontos animação css:
Ao criar uma determinada animação podemos criar múltiplos momentos de acontecimentos repartindo percentualmente a animação e alterando a ou as suas propriedades a cada momento, alterando a nossa declaração para :
@keyframes nomeanimacao
{
0% {background:blue;}
25% {background:black;}
50%{background:purple;}
75%{background:green;}
100%{background:grey;}
}

Podemos ainda querer mover a animação em momentos e locais diferentes para isso podemos acrescentar à nossa animação posições “left” e “top” para cada momento percentual:
@keyframes nomeanimacao
{
0% {background:blue; left:0px; top:0px;}
25% {background:black; left:250px; top:0px;}
50%{background:purple; left:250px; top:250px;}
75%{background:green; left:0px; top:250px;}
100%{background:grey; left:0px; top:0px;}
}

Conclusão:
Podemos criar uma única animação e usar em diferentes elementos como multiplas divs, atribuindo diferentes timmings para cada div.
Cobrimos aqui o principio base de animação em css, sendo um campo em franco desenvolvimento voltarei ao tema para mais desenvolvimentos. Ainda dentro da animação em css vale a pena ler animação de titulos em css.