Propriedade transition-duration: Quanto tempo vai durar?

Depois de definir quais propriedades CSS serão transicionadas com transition-property, o próximo passo é dizer ao navegador por quanto tempo essa transição deve durar. É para isso que serve a propriedade transition-duration.

A transition-duration é como o "cronômetro" da sua transição. Ela define o tempo que o navegador levará para ir do estado inicial ao estado final da propriedade animada. Sem ela, a transição não acontece, mesmo que você tenha definido transition-property.

Como funciona transition-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 transição dura zero segundos, ou seja, é instantânea. Se você não definir transition-duration, este é o valor que será usado, e você não verá nenhuma transição suave.
• <tempo>: Um valor numérico seguido da unidade de tempo (s para segundos ou ms para milissegundos).

Sintaxe:

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

Exemplos:

1. Transição de 0.5 segundos:

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transition-property: background-color;
  transition-duration: 0.5s; /* A transição da cor de fundo levará meio segundo */
}

.box:hover {
  background-color: red;
}

Resultado: A cor de fundo muda suavemente de azul para vermelho em 0.5 segundos.

2. Transição de 300 milissegundos:

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transition-property: background-color;
  transition-duration: 300ms; /* A transição da cor de fundo levará 300 milissegundos */
}

.box:hover {
  background-color: red;
}

Resultado: A cor de fundo muda suavemente de azul para vermelho em 300 milissegundos (o mesmo que 0.3 segundos).

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

Se você listou várias propriedades em transition-property, você pode fornecer uma duração para cada uma delas, separadas por vírgula. A ordem deve corresponder à ordem das propriedades.

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transform: translateX(0);
  transition-property: background-color, width, transform;
  transition-duration: 0.5s, 1s, 0.3s; /* 0.5s para BG, 1s para width, 0.3s para transform */
}

.box:hover {
  background-color: red;
  width: 150px;
  transform: translateX(50px);
}

Resultado:

• background-color muda em 0.5 segundos.
• width muda em 1 segundo.
• transform muda em 0.3 segundos.

Se o número de durações não corresponder ao número de propriedades, as durações serão repetidas ou truncadas conforme necessário. É uma boa prática fazer com que correspondam.

Dicas para transition-duration:

• Tempos Comuns: Duração entre 0.2s e 0.5s são geralmente ideais para a maioria das interações de interface, pois são rápidas o suficiente para não atrasar o usuário, mas lentas o suficiente para serem percebidas como suaves.
• Não muito longo: Transições muito longas podem ser irritantes e fazer a interface parecer lenta.
• Não muito curto: Transições muito curtas podem parecer instantâneas e anular o propósito da transição.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>transition-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;
    }

    .box {
      width: 120px;
      height: 120px;
      background-color: #007bff;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition-property: background-color, width, transform; /* Todas estas terão transição */
    }

    /* --- Exemplos de transition-duration --- */

    .box-short {
      transition-duration: 0.2s; /* Transição rápida */
    }
    .box-short:hover {
      background-color: #28a745;
      width: 150px;
      transform: rotate(30deg);
    }

    .box-medium {
      transition-duration: 0.5s; /* Transição padrão */
    }
    .box-medium:hover {
      background-color: #dc3545;
      width: 150px;
      transform: rotate(30deg);
    }

    .box-long {
      transition-duration: 1s; /* Transição lenta */
    }
    .box-long:hover {
      background-color: #ffc107;
      width: 150px;
      transform: rotate(30deg);
    }

    .box-mixed {
      transition-duration: 0.3s, 0.8s, 0.5s; /* Duração diferente para cada propriedade */
    }
    .box-mixed:hover {
      background-color: #6c757d;
      width: 150px;
      transform: rotate(30deg);
    }
  </style>
</head>
<body>
  <div class="box box-short">0.2s</div>
  <div class="box box-medium">0.5s</div>
  <div class="box box-long">1s</div>
  <div class="box box-mixed">Mixed</div>
</body>
</html>

Resultado:

• Passe o mouse sobre cada caixa para observar como o transition-duration afeta a velocidade da transição.
• Note a diferença entre as transições rápidas, médias, lentas e a mista.

Pontos Chave:

• Tempo: Define o tempo que a transição levará para ser concluída.
• Unidades: Use s (segundos) ou ms (milissegundos).
• Padrão: 0s (instantâneo).
• Múltiplas Propriedades: Pode-se definir durações diferentes para cada propriedade listada em transition-property.

Com transition-duration, você controla o "quanto tempo" sua transição levará, adicionando ritmo e fluidez aos seus efeitos visuais.