Propriedade animation
Última atualização: 2026-09-13
animation Propriedade animation
A propriedade animation é um atalho para animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode e animation-play-state. Combinada com @keyframes, define sequências de animação em várias etapas, com loop e pausáveis. Diferente de transition, a animation é reproduzida automaticamente, sem gatilho, sendo ideal para loaders, carrosséis, efeitos de respiração e outros visuais contínuos.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | todos |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
animation: [ none | <single-animation> ]#;
/* <single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] */⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<single-animation># | Valor | Atalho de animação: nome, duração, função de tempo, atraso, contagem de iterações, direção, modo de preenchimento, estado de reprodução |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| Suportado em todos os principais navegadores | |||||
Dica： A ordem dos valores não é significativa, mas o primeiro valor que é interpretado como tempo é a duração e o segundo é o atraso. Evite um nome de keyframe que colida com uma palavra-chave.
Importante： Se o atalho animation não incluir um animation-name, toda a declaração é inválida. Recomenda-se incluir o nome dentro do atalho para garantir que a animação realmente execute.
❓ Perguntas Frequentes
QUma animação CSS pode ser pausada no meio e depois retomada?
ASim. Defina animation-play-state: paused para pausar e running para retomar. O padrão mais comum é combiná-lo com :hover para que a animação pause enquanto o mouse está sobre o elemento. Enquanto pausada, a animação permanece no quadro atual e, ao retomar, continua exatamente de onde parou.
QComo faço uma animação tocar uma vez e parar no último quadro?
AUse animation-fill-mode: forwards, que mantém o elemento no seu quadro-chave final após o fim da animação, e defina animation-iteration-count como 1. Se você também quiser que o elemento mantenha seu estado inicial antes do início da animação, use animation-fill-mode: both. Esta é a forma padrão de rodar uma animação de entrada ou revelação de uma única vez.
QNo atalho animation, qual tempo é a duração e qual é o atraso?
AO primeiro valor que é interpretado como tempo é a duração e o segundo é o atraso. Em animation: bounce 1.5s 0.5s ease, 1.5s é a duração da reprodução e a animação começa após um atraso de 0.5s. Quando apenas um tempo é dado, ele é a duração e o atraso assume 0s por padrão. Confundir esses dois tempos é o erro de atalho mais comum.
QMinha animação CSS está engasgada e perde quadros. Como deixá-la mais suave?
AAnime apenas transform e opacity, e evite animar width, height, filter ou outras propriedades que forçam reflow e repaint a cada quadro. Adicione will-change ao elemento animado para que uma camada de compositor seja criada com antecedência, e use posicionamento absoluto para tirá-lo do fluxo do documento. Um animation-delay negativo pula o início e vai direto para o meio.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
