Nenhum produto encontrado nessa seleção.
Provavelmente você já ouviu ou leu sobre as CSS3 animations (animações em CSS) em algum local, mas, o simples fato de os navegadores mais antigos não suportarem este recurso, o afastou das maravilhas do novo mundo, e o pior, de tentar pelo menos aprender como elas funcionam. Seja por este, ou por outro, motivo qualquer, já está passando da hora de aprender como as CSS3 animations funcionam e como elas podem fazer o seu layout se destacar na imensidão de sites existentes na Internet da atualidade.
Atualmente, todos os navegadores mais novos (incluindo o Internet Explorer) suportam animações em CSS, por isso, talvez seja hora de olhar para frente e esquecer as pessoas que ainda utilizam navegadores antigos que não suportam este recurso.
Para saber se o seu navegador suporta animações em CSS3, basta olhar o exemplo abaixo; se conseguir visualizar uma ponta girando em um circulo que muda de cor, seu navegador as suporta.
Então? Vamos colocar a mão em códigos?
CSS3 Animations
Se você já trabalhou com animação gráfica, gifs animados, ou qualquer tipo de animação em outro aplicativo que não utilizasse CSS, vai estar em casa. O conceito das CSS3 animations é o mesmo da maioria dos aplicativos: criar pontos chave onde sua aplicação vai ser modificada do ponto anterior até o próximo ponto.
@keyframes
Os pontos chave são chamados de @keyframes e são medidos em porcentagem, ou com as palavras "from" (de) e "to" (até). Também é necessário que você de um nome qualquer para sua animação.
Veja um exemplo bem simples:
.elemento{
animation: nome_animacao 4s 0s infinite linear normal;
width:10px;
height:200px;
background: orange;
}
@keyframes nome_animacao {
to{
width: 100%;
}
}
No trecho acima, tenho um elemento com classe "elemento" que tem a largura inicial de 10px. Em @keyframes, simplesmente disse que ele terá a largura final de 100%.
O efeito final fica assim:
Você define os @keyframes da seguinte maneira:
@keyframes nome_animacao {
to{
width: 100%;
}
}Ou:
@keyframes nome_animacao {
from{
width: 10px;
}
to{
width: 100%;
}
}
Ou ainda:
@keyframes nome_animacao {
0% {
width: 10px;
}
100% {
width: 100%;
}
}
Também podem existir mais pontos, caso eles sejam necessários, veja:
@keyframes nome_animacao {
0% {
width: 10px;
}
10%{
width: 100%;
}
20% {
width: 10%;
}
40% {
width: 50%;
}
60% {
width: 25%;
}
80% {
width: 75%;
}
100% {
width: 100%;
}
}
Cada @keyframe será executado na sua devida ordem.
Você pode manipular vários atributos se desejar, veja:
@keyframes nome_animacao {
to {
width: 100%;
background: blue;
border-radius:50%;
}
}
Propriedade animation em CSS3
Depois que você criou seus @keyframes, o próximo passo é adicionar a propriedade "animation" ao elemento que deseja que seja animado. Veja um exemplo:
.elemento{
animation-name: nome_animacao;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
width:10px;
height:200px;
background: orange;
}
Veja o que cada linha significa:
- animation-name – O nome da animação (nosso caso, nome_animacao);
- animation-duration – Duração da animação (Exemplo: 1s, 0.3s, 300ms…);
- animation-delay – O tempo de espera para a animação começar (Exemplo: 10s, 3000ms, 300ms…);
- animation-iteration-count – Quantas vezes a animação será executada (1, 10, infinite, initial, inherit);
- animation-timing-function – Especifica o método utilizado para calcular a velocidade da animação (linear, ease, ease-in, ease-out, cubic-bezier(n,n,n,n), initial, inherit).
- animation-direction – Para qual lado a animação irá ser executada (normal, reverse, alternate, alternate-reverse, initial, inherit);
- animation-fill-mode – Faz a animação ficar no local onde ela termina. (none, forwards, backwards, both, initial, inherit).
É claro que você não precisa especificar tudo isso da maneira descrita, também existe um atalho na seguinte ordem:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction.
Ou o mesmo que:
.elemento{
animation: nome_animacao 4s 1s infinite linear normal;
}
Prefixos dos navegadores
Por se tratar de algo muito recente, é necessário que você adicione os prefixos dos navegadores para garantir que as animações funcionem em todos os locais possíveis. Estes são:
- Chrome e Safari:
-webkit- - Firefox:
-moz- - Opera:
-o- - Internet Explorer:
-ms-
O que deixaria nosso código da seguinte maneira para as animações:
.elemento {
-webkit-animation: nome_animacao 4s 1s infinite linear normal;
-moz-animation: nome_animacao 4s 1s infinite linear normal;
-ms-animation: nome_animacao 4s 1s infinite linear normal;
-o-animation: nome_animacao 4s 1s infinite linear normal;
animation: nome_animacao 4s 1s infinite linear normal;
}E no caso dos @keyframes:
@-webkit-keyframes nome_animacao { /* seus pontos chave */ }
@-moz-keyframes nome_animacao { /* seus pontos chave */ }
@-ms-keyframes nome_animacao { /* seus pontos chave */ }
@-o-keyframes nome_animacao { /* seus pontos chave */ }
@keyframes nome_animacao { /* seus pontos chave */ }
Sobre a velocidade da animação
Como descrevi a respeito de animation-timing-function, a velocidade é medida utilizando algumas funções que já vem programadas por padrão, porém, existe um método para ser bem detalhista a respeito da velocidade: a função cubic-bezier(n,n,n,n), que utiliza Curva de Bézier para atingir seu objetivo.
Se você (assim como eu) não entende nada sobre a tal Curva de Bézier, pode utilizar o site Ceaser para atingir este objetivo.
Veja um exemplo de timming diferenciado:
O CSS do exemplo acima, que é o único completo (com prefixos) desse tutorial, ficou assim:
.elemento{
-webkit-animation: nome_animacao 3s 1s infinite cubic-bezier(0.600, -0.280, 0.735, 0.045) alternate;
-moz-animation: nome_animacao 3s 1s infinite cubic-bezier(0.600, -0.280, 0.735, 0.045) alternate;
-ms-animation: nome_animacao 3s 1s infinite cubic-bezier(0.600, -0.280, 0.735, 0.045) alternate;
-o-animation: nome_animacao 3s 1s infinite cubic-bezier(0.600, -0.280, 0.735, 0.045) alternate;
animation: nome_animacao 3s 1s infinite cubic-bezier(0.600, -0.280, 0.735, 0.045) alternate;
width:100px;
height:100px;
background: orange;
position: absolute;
top:0;
left:10%;
}
@-webkit-keyframes nome_animacao {
to {
left: 90%;
}
}
@-moz-keyframes nome_animacao {
to {
left: 90%;
}
}
@-ms-keyframes nome_animacao {
to {
left: 90%;
}
}
@-o-keyframes nome_animacao {
to {
left: 90%;
}
}
@keyframes nome_animacao {
to {
left: 90%;
}
}Como você pode perceber, o CSS fica imenso, mas nada que um Express Prefixr não resolva por você.
Concluindo
Como descrevi no início do artigo, você deve verificar se a sua aplicação deve ser suportada em navegadores mais antigos, que não suportam animações em CSS; se sim, terá que viver sem as animações do CSS3, ou procurar criá-las com Javascript (ou o que tiver à sua disposição); se não, mergulhe com vontade nas animações que descrevi acima.
Em caso de pânico, dúvidas ou criticas, basta comentar abaixo.
