Animação em CSS principios de criação

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.

One thought on “Animação em CSS principios de criação

Leave a Reply

Your email address will not be published. Required fields are marked *