Animações usadas na medida certa podem potencializar uma boa experiência em nosso site. Hoje em dia a melhor e única tecnologia universalmente aceita para isso é o CSS. Me acompanhe e você vai aprender como trabalhar com animações em loop.
Para criar animações infinitas no CSS, utilizamos a propriedade animation-iteration-count: infinite;.
Se você aplicar esta regra para uma animação existente, estará resolvido. Mas para mais detalhes, trago neste artigo outros exemplos e recursos, acompanhe abaixo:
Exemplo completo de animação infinita
Segue abaixo o código completo de um exemplo de animação de carregamento. Esta animação pode ser aplicada à imagens, divs ou qualquer outro elemento HTML que não seja por padrão display: inline.
<html>
<head>
<style type="text/css">
.loading {
background: #094CFA;
width: 60px;
height: 60px;
margin: auto;
border-radius: 4px;
/* Aqui declaramos nossa animação inline */
animation: rotate 3s linear infinite;
}
/* Aqui definimos a nossa animação com o nome "rotate" */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>
O script acima terá o mesmo efeito de animação mostrado abaixo. Só adicionei alguns efeitos visuais. Se quiser copiar, basta clicar na aba CSS abaixo:
See the Pen Animação Infinita em CSS - Exemplo by Ricardo Metring (@metring) on CodePen.
Na classe loading do CSS aplicamos alguns estilos e por último a animação por si.
Para entender o que acontece, repare na propriedade animation e em @keyframes rotate. Em animation, nós definimos a animação da forma curta, em apenas uma linha, mas poderíamos também escrevê-la usando 4 linhas, na forma longa:
.loading {
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
Para uma referência do que cada propriedade e valor significa:
| animation-name | O nome da animação especificado com @keyframes |
|---|---|
| animation-duration | O tempo de duração da animação. Pode ser especificado usando segundos (s) ou milisegundos (ms). Também podemos usar segundos fracionados, ex: 0.5s |
| animation-timing-function | Define em que passo é executada a animação do inicio ao fim. Valores aceitos: linear, ease (padrão), ease-in, ease-out, ease-in-out, step-start, step-end, steps() |
| animation-iteration-count | Define quantas vezes a animação é executada. Valores aceitos: 1 (padrão), 2, 3 ... infinite |
| animation-delay | Apesar de eu não ter especificado esta propriedade no exemplo, vale mencioná-la aqui. Ela serve para definir um tempo antes do início da animação. O valor passado é em segundos ou ms assim como animation-duration, e na forma curta de se escrever é sempre considerado o valor em segundos/ms que vem depois. Ex: animation: rotate 2s 1s; |
Eu sempre prefiro usar a forma curta de escrever, pois não importa a ordem em que você define os valores das propriedades, e é muito menos pra se memorizar.
Utilizando keyframes
Keyframes, como o próprio nome já diz, são quadros-chave que definimos com tempos específicos do início ao fim de uma animação para representá-la.
Se você quer animar um objeto caindo no chão, por exemplo, só precisa definir a posição inicial do objeto no ar, e a posição final, no chão. Foi basicamente isso que fizemos com a animação de exemplo neste artigo.
Como vimos acima, a duração das animações não é definida dentro de @keyframes, mas usamos porcentagens para definir genericamente a proporção de tempo entre um quadro-chave e outro. Alternativamente podemos usar from e to para definirmos os quadros 0% e 100% respectivamente. Veja o exemplo abaixo para entender melhor:
@keyframes fill {
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 1%;
}
}
See the Pen Animação Infinita em CSS - Exemplo @keyframes by Ricardo Metring (@metring) on CodePen.
Compatibilidade de animation entre navegadores
Trabalhei muito tempo com o Flash, e há alguns anos era a única coisa que existia para suportar animações na web. Felizmente de uns anos pra cá esse cenário mudou e as animações em CSS são o padrão atual.
Segundo o site caniuse.com, + de 96.5% dos usuários utilizam navegadores totalmente compatíveis com animações CSS, e como esse número tende a aumentar cada vez mais, na minha opinião não há com o que se preocupar em termos de compatibilidade.
Utilizar prefixos -moz-animation, -webkit-animation, etc. também tem se tornado algo arcaico. Ainda segundo o caniuse, mais de 94% dos usuários utiliza navegadores que não mais necessitam prefixos para animation. Não utilizei prefixos nos exemplos para não prolongar o texto e nem sustentar algo que vem perdendo importância, mas isso fica a seu critério. Para outras propriedades CSS, entretanto, é obrigatório usar prefixos.
Publicidade
