Propriedade Duração da Animação
Última atualização: 2026-09-13
animation-duration Propriedade Duração da Animação
A propriedade animation-duration define quanto tempo uma animação leva para completar um ciclo completo. Valores menores deixam a animação mais rápida; valores maiores a deixam mais lenta. Faz parte do shorthand animation e, quando usada sozinha, substitui a duração definida pelo shorthand.
| Categoria | |
|---|---|
| Valor Inicial | 0s |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
animation-duration: <time>#;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<time> | Tipo | A duração da animaçã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-duration | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| Suportado em todos os principais navegadores | |||||
Aviso： O valor padrão é 0s, o que significa que a animação completa instantaneamente e nenhum efeito é visível. Ao usar o shorthand animation, defina sempre uma duração maior que 0 explicitamente.
❓ Perguntas Frequentes
QA propriedade animation-duration pode usar segundos fracionários em CSS?
ASim. Valores como 0.5s, 0.25s, 150ms e 800ms são todos válidos. Para microinterações como feedback de botão e dicas de hover, 100ms a 300ms é típico — perceptível, mas não lento. Animações de entrada em nível de página geralmente rodam de 300ms a 600ms. Animações maiores que 1s fazem a espera parecer óbvia e servem para cenários de progresso ou ênfase.
QAnimações CSS diferentes em um mesmo elemento podem ter durações diferentes?
ASim. animation-duration aceita uma lista separada por vírgulas, correspondida um a um com os nomes em animation-name. Por exemplo, com animation-name: a, b; animation-duration: 1s, 2s;, a animação a roda por 1s e a animação b por 2s. Se houver menos durações que nomes, as ausentes reutilizam o primeiro valor.
QO que acontece com animation-duration: 0s? A animação ainda roda?
ANenhuma animação visível é produzida. Uma duração de 0s significa que a animação termina instantaneamente e o elemento salta direto para o keyframe final, o que é equivalente a não ter animação. O shorthand animation tem como padrão uma duração de 0s, então animation: name; sem nenhum tempo não será reproduzido — dê sempre à animação uma duração maior que 0.
QQual é a diferença entre animation-duration e transition-duration?
Aanimation-duration define quanto tempo leva um ciclo completo único de uma animação @keyframes, enquanto transition-duration define quanto tempo uma transição leva para ir do valor inicial ao valor final após uma mudança de estado. Ambas aceitam valores de tempo e listas separadas por vírgulas, mas atuam em mecanismos completamente diferentes e não podem substituir uma à outra.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
