Animação infinita em CSS - Como Funciona + Exemplo em Loop

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.



Este artigo foi útil pra você?

Ricardo Metring

Ricardo Metring

Sou desenvolvedor full stack e co-fundador da Criar.io.
Trabalho há 10 anos com programação e sempre interessado em aprender mais.

Linkedin     Github

Artigos relacionados