Propriedade animation-duration: Quanto tempo dura a animação?

Depois de definir o "roteiro" da sua animação com @keyframes e "chamar" essa animação para um elemento com animation-name, o próximo passo crucial é dizer ao navegador por quanto tempo um ciclo completo dessa animação deve durar. É para isso que serve a propriedade animation-duration.

A animation-duration é como o "cronômetro" de cada repetição da sua animação. Ela define o tempo que o navegador levará para ir do 0% ao 100% (ou from a to) dos seus @keyframes. Sem ela, a animação não será visível, pois a duração padrão é zero.

Como funciona animation-duration

Esta propriedade aceita um valor de tempo, que pode ser em segundos (s) ou milissegundos (ms).

Valores possíveis:

• 0s ou 0ms (padrão): A animação dura zero segundos, ou seja, é instantânea. Se você não definir animation-duration, este é o valor que será usado, e você não verá nenhuma animação.
• <tempo>: Um valor numérico seguido da unidade de tempo (s para segundos ou ms para milissegundos).

Sintaxe:

.elemento {
  animation-duration: <tempo>;
}

Exemplos:

1. Animação com duração de 2 segundos:

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* ... outras propriedades ... */

  animation-name: girar;
  animation-duration: 2s; /* Cada giro completo levará 2 segundos */
  animation-iteration-count: infinite;
}

Resultado: A caixa gira 360 graus em 2 segundos, repetidamente.

2. Animação com duração de 1500 milissegundos:

@keyframes pulsar {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  /* ... outras propriedades ... */

  animation-name: pulsar;
  animation-duration: 1500ms; /* Cada pulsação levará 1.5 segundos */
  animation-iteration-count: infinite;
}

Resultado: A caixa pulsa (aumenta e diminui) em 1.5 segundos, repetidamente.

3. Múltiplas durações para múltiplas animações:

Se você aplicou múltiplas animações com animation-name (separadas por vírgula), você pode fornecer uma duração para cada uma delas, também separadas por vírgula. A ordem deve corresponder à ordem dos nomes das animações.

@keyframes moverDireita {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

@keyframes mudarCor {
  0% { background-color: blue; }
  50% { background-color: green; }
  100% { background-color: blue; }
}

.box {
  width: 100px;
  height: 100px;
  /* ... outras propriedades ... */

  animation-name: moverDireita, mudarCor;
  animation-duration: 2s, 3s; /* 'moverDireita' dura 2s, 'mudarCor' dura 3s */
  animation-iteration-count: infinite, infinite;
}

Resultado: A animação de movimento (moverDireita) completa um ciclo em 2 segundos, enquanto a animação de mudança de cor (mudarCor) completa um ciclo em 3 segundos. Elas rodam independentemente em suas próprias durações.

Dicas para animation-duration:

• Percepção: Duração entre 0.5s e 3s são comuns para a maioria das animações visíveis. Animações muito rápidas podem ser difíceis de perceber, e muito lentas podem ser entediantes.
• Sincronização: Ao usar múltiplas animações, ajuste as durações para sincronizar os efeitos se desejar um resultado coordenado.
• 0s: Lembre-se que 0s significa que a animação não será visível.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>animation-duration</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f2f5;
      margin: 0;
    }

    /* --- Definição da Animação de Giro --- */
    @keyframes girar {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* --- Definição da Animação de Pulso --- */
    @keyframes pulsar {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #007bff;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      margin: 10px;
      animation-name: girar; /* Todas usarão a animação de girar */
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    /* --- Exemplos de animation-duration --- */

    .box-curta {
      animation-duration: 0.5s; /* Gira rápido */
    }

    .box-media {
      animation-duration: 2s; /* Gira em velocidade normal */
    }

    .box-longa {
      animation-duration: 4s; /* Gira lentamente */
    }

    .box-multiplas-duracoes {
      animation-name: girar, pulsar; /* Aplica duas animações */
      animation-duration: 3s, 1s; /* Girar em 3s, Pulsar em 1s */
      animation-iteration-count: infinite, infinite;
      animation-timing-function: linear, ease-in-out;
      background-color: #28a745; /* Cor base para esta caixa */
    }
  </style>
</head>
<body>
  <div class="box box-curta">0.5s</div>
  <div class="box box-media">2s</div>
  <div class="box box-longa">4s</div>
  <div class="box box-multiplas-duracoes">Múltiplas</div>
</body>
</html>

Resultado:

• Observe como a duração afeta a velocidade de cada animação de giro.
• A caixa "Múltiplas" mostra duas animações rodando com durações diferentes.

Com animation-duration, você controla o "ritmo" da sua animação, definindo o tempo que cada ciclo levará para ser concluído.