Criando Animações com CSS3
Geralmente temos a necessidade de criar animações em uma página, seja um site ou uma aplicação web, porém, esse tipo de necessidade já foi muito temida pelos desenvolvedores, pois, tratava-se de um recurso chato de ser feito, tendo a necessidade de criar giff’s ou animações com flash.
Para exemplo do post vamos criar uma animação de loading, conforme imagem abaixo:
Pronto? Então vamos começar!
Entendendo a animação
Antes de saírmos escrevendo código, vamos entender primeiro como realizar essa animação, isso evitará tentativas e chutes desnecessários e um ganho de tempo.
Sabemos que trata-se de um círculo, logo, já temos nosso primeiro objetivo:
- Criar um círculo com bordas grossas e cinzas.
Certo, mas como podemos realizar a animação daquele pedaço verde? Simples, para isso, podemos definir uma cor para um (apenas um) dos lados das bordas de nosso círculo, logo, temos outro objetivo:
- Definir uma borda com cor verde.
Porém, somente essa definição de cor não será o suficiente, pois, a mesma ficará parada sem qualquer animação.
Como podemos animar o círculo cinza com uma borda verde? Podemos simplesmente girar o círculo, dando á entender que as outras bordas estão ficando com cores verdes, sendo assim, temos mais um e último objetivo definido:
- Girar o círculo infinitamente.
Finalizando, precisaremos seguir três passos para concluir essa animação, sendo eles:
- Criar um círculo com bordas grossas e cinza.
- Definir uma borda com cor verde.
- Girar o círculo infinitamente.
Agora que já sabemos como realizar a animação, é hora de finalmente implementá-la.
Criando a animação
Criar um círculo com bordas grossas e cinza
Como sabemos, o primeiro passo será criar um círculo com bordas cinzas e grossas, para isso, vamos criar uma div
em nosso HTML:
<div class="spinner"></div>
Veja que foi dada a classe spinner
para o círculo, agora, precisamos aplicar o CSS para que o mesmo seja um círculo:
Repare que definimos uma altura (height) e largura (width) fixa para o círculo (ambos devem possuir o mesmo valor), e para deixá-lo redondo, apliquei um border-radius
com o valor de 100%
, porém, ainda está faltando definir a borda para nosso círculo, podemos fazer isso com a propriedade border
:
Foi definido uma borda com tamanho de 5px
e com a cor #DCDCDC
(cinza claro).
Com isso, devemos ter o seguinte resultado:
Legal, nosso primeiro passo foi concluído.
Definir uma borda com cor verde
O segundo passo é simplesmente definir a cor verde para um dos lados de nossa borda, podemos fazer isso com o border-left-color
, assim, definiremos uma cor para a borda da esquerda (left):
Foi definida a cor #00CC99
(verde nem claro e nem escuro) para a borda da esquerda. Após definir a cor, devemos ter o seguinte resultado:
Com isso, o segundo passo também está concluído.
Girar o círculo infinitamente
Legal, agora já temos tudo pronto, precisamos apenas criar a animação responsável por girar o círculo infinitamente dando a ideia de loading (carregando/processando). Como podemos criar uma animação no CSS? Com a chegada do CSS3, um de seus recursos foi o Animation, sim, ele é o responsável por criar as animações.
Para criar uma animação, precisamos utilizar a palavra reservada @keyframes
seguida pelo nome da animação:
@keyframes loading
Legal, dizemos que estamos criando uma animação chamada loading
(o nome será usado mais á frente), mas algo está estranho, o que ela irá fazer? Pois é, para de fato criarmos uma animação, precisamos passar um corpo para ela, podemos fazer isso utilizando as chaves como de costume no CSS:
Pronto, agora sim, nossa animação está criada corretamente.
Para girar uma elemento com CSS, podemos utilizar a propriedade transform
(também inserida no CSS3) junto com seu valor rotate
. Nossa animação deve começar com 0 graus de giro e finalizar com 360 graus, assim, a mesma irá dar um giro completo.
Para dizermos como uma animação deve começar, ou seja, qual será seu estado inicial, podemos utilizar o from
ou 0%
:
Ou:
Repare que passamos o valor 0 para o rotate
, assim, estamos indicando que a rotação inicial (0%
) deve ser 0 grau.
Já definimos o estado inicial da animação, agora precisamos definir seu estado final, que será um giro de 360 graus. Podemos definir o estado final de uma animação através de to
ou 100%
:
Ou:
Tudo certo, nossa animação final, fica da seguinte maneira:
Obs: Eu particularmente prefiro trabalhar com %
, pois, o from
e to
só funcionam quando nada acontece no meio deles, porém, com porcentagem, podemos definir qualquer estado da animação entre seu começo 0%
e seu fim 100%
, nos dando muito mais possibilidades.
Pronto, já temos a nossa animação criada, como podemos aplicá-la em nosso elemento? Podemos fazer isso através da propriedade animation
(inserida no CSS3), a mesma recebe alguns (não somente esses) parâmetros:
- Nome da animação que desejamos aplicar.
- Tempo que a animação deve ser executada.
- Maneira como a animação deve ser realizada.
- Informar se a animação deve se repetir ou não, ou seja, ser infinita.
Para aplicar o efeito da animação, vamos criar outra classe para nosso spinner
:
<div class="spinner is-animating"></div>
E aplicar a animação em seu CSS:
No código acima, dizemos que o elemento que possuir as classes spinner
e is-animation
deve receber a animação loading
, a mesma deve ser executada em dois segundos (2s
) de forma linear
, ou seja, os dois segundos devem ser divididos e aplicados de forma igual durante seu ínicio e fim. Por fim, dizemos para ela ser infinita (infinite
), assim, deverá executar para sempre.
Pronto, isso deve ser o suficiente para nosso loading estar animado.
Saiba mais
Compatibilidade de navegadores
Por questões de compatibilidade com browsers (navegadores) mais antigos, é aconselhado utilizar prefixos para a criação de animações, sendo eles:
Cada prefixo é utilizado para um navegador específico:
- webkit: Google Chrome e Safari.
- moz: Mozila.
- o: Opera.
- ms: Internet Explorer.
O resto continua conforme anteriormente, assim, conseguiremos garantir uma maior compatibilidade de navegadores para nossa animação.
Velocidade da animação
Caso você tenha reparado, a animação final ficou diferente da inicial, apresentada no ínicio do post, isso porque a forma que estamos pedindo para a animação ser executada está diferente.
No exemplo do post pedimos para a animação acontecer de forma linear
, ou seja, os dois segundos serão dividos de forma igual do começo ao fim, porém, queremos que ela comece devagar e finalize rápido, para isso, podemos utilizar a forma de animação com cubic-bezier
:
O cubic-bezier
é uma curva definida em quatro (4) pontos, sendo eles: p0, p1, p2 e p3, também podemos definir esses pontos como x1, y1, x2 e y2. Seus valores devem ser de 0 á 1, sendo 0 devagar e 1 rápido.
E finalmente nossa animação está da forma apresentada no ínicio do post.
Animation com JS
Recentemente foi introduzida uma API no JavaScript responsável por realizar a mesma animação (assunto para um próximo *post), ela é chamada de Animation API.
Conclusão
Não precisamos mais ficar criando giff’s, hoje, apenas com CSS3 ou JavaScript muita animação pode ser feita.
E aí, gostou? Já conhecia o Animation? Não deixe de comentar.
Publicado originalmente em blog.matheuscastiglioni.com.br em 24 de Abril de 2018.