Propriedade CSS animation-duration

A propriedade animation-duration define o tempo (em segundos ou milissegundos) que uma animação leva para completar um ciclo. Um ciclo representa uma única execução do keyframe 0% ao keyframe 100%; se a animação se repetir, essa duração se aplica a cada repetição, não ao tempo total de execução. Muitas vezes, a propriedade abreviada animation é usada para definir todas as propriedades de animação de uma só vez, mas definir animation-duration separadamente é útil quando você deseja substituir apenas o tempo mantendo o restante da abreviação intacta.

O valor padrão é 0s, o que significa que a animação é concluída instantaneamente e os keyframes não têm efeito visível. Esse é o motivo mais comum pelo qual uma animação "não funciona": a regra @keyframes e o animation-name estão corretos, mas nenhuma duração foi definida. Uma animação sempre precisa de uma duração diferente de zero para ser visualizada.

Valores negativos são inválidos e fazem com que a propriedade seja ignorada (algumas implementações anteriores podem tratá-los como 0s). Se você quiser um início atrasado, use animation-delay — um atraso negativo é válido lá e inicia a animação no meio do ciclo.

Como a duração se combina com outras propriedades de animação

A duração é apenas uma parte de uma animação. Ela funciona em conjunto com:

animation-name — qual regra @keyframes executar (necessária para que algo aconteça).
animation-timing-function — a curva de velocidade dentro da duração (ease, linear, etc.).
animation-iteration-count — quantas vezes a duração se repete (infinite para loops infinitos).
animation-delay — quanto tempo aguardar antes do início do primeiro ciclo.

Por exemplo, animation: pulse 2s ease-in-out 3 executa os keyframes pulse três vezes, cada ciclo com duração de 2 segundos, totalizando 6 segundos de movimento.

Quando múltiplos valores separados por vírgula são especificados para qualquer propriedade de animação, eles são aplicados em ordem às animações correspondentes definidas em animation-name. Se houver mais durações do que nomes, os valores extras são ignorados; se houver menos, a lista reinicia e se repete desde o início. Por exemplo, com dois nomes de animação e animation-duration: 1s, 2s, 3s, o terceiro valor é descartado; com animation-duration: 1s, ambas as animações usam 1s.

Segundos vs. milissegundos

1s e 1000ms são equivalentes — use aquele que for mais legível. Milissegundos são úteis para transições curtas de interface (250ms), segundos para movimentos de loop mais longos (6s). A unidade é obrigatória: animation-duration: 2 (sem unidade) é inválido e a declaração é descartada.

A propriedade animation-duration é uma das propriedades do CSS3.

Valor Inicial	0s
Aplica-se a	Todos os elementos, pseudo-elementos ::before e ::after.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.animationDuration = "4s";

Sintaxe

Sintaxe da Propriedade CSS animation-duration

animation-duration: time | initial | inherit;

Exemplo da propriedade animation-duration:

Exemplo da Propriedade CSS animation-duration com segundos

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade animation-duration com duração de 6 segundos:

Exemplo da Propriedade CSS animation-duration com 6 segundos

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: nudge 6s ease infinite alternate;
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        60% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
time	Especifica o tempo que uma animação leva para completar um ciclo. Os valores podem ser especificados em segundos (`s`) ou milissegundos (`ms`). Observe que o valor padrão da própria propriedade é `0s`, não a palavra-chave `time`.	Experimente »
initial	Faz com que a propriedade use seu valor padrão (`0s`).
inherit	Herda a propriedade de seu elemento pai.

Suporte dos navegadores

animation-duration é suportado em todos os navegadores modernos. Não é herdado e não é em si animável — alterar a duração no meio de uma animação reinicia o tempo em vez de interpolar.

Propriedades relacionadas

animation — a abreviação que define a duração juntamente com o nome, temporização, atraso e mais.
animation-name — nomeia a regra @keyframes a ser executada.
animation-delay — atrasa o início da animação.
animation-iteration-count — repete a duração um número definido de vezes.
animation-timing-function — define a curva de velocidade dentro da duração.
animation-fill-mode — controla os estilos antes e depois da execução da animação.

Prática

Qual é o papel da propriedade CSS animation-duration e como ela é especificada?

A propriedade CSS animation-duration é usada para definir o número de segundos ou milissegundos que uma animação leva para completar um ciclo.A propriedade CSS animation-duration é usada para definir a cor da animação em CSS.A propriedade CSS animation-duration é especificada em porcentagens.A propriedade CSS animation-duration é especificada em segundos (s) ou milissegundos (ms).A propriedade CSS animation-duration é responsável por definir a direção da animação em CSS.