Shorthand transition: Atalho para todas as propriedades de transição

Até agora, você aprendeu sobre as quatro propriedades individuais que controlam as transições CSS:

• transition-property: O que vai mudar?
• transition-duration: Quanto tempo vai durar?
• transition-timing-function: A 'velocidade' da transição.
• transition-delay: Quando a transição começa?

Escrever todas essas propriedades separadamente pode ser um pouco repetitivo, especialmente quando você tem várias transições. É por isso que o CSS oferece a propriedade shorthand transition, que permite definir todas elas em uma única linha de código.

Pense na propriedade transition como um "pacote completo" para suas transições. Em vez de comprar cada item separadamente, você compra um combo que já vem com tudo o que precisa para uma transição suave.

Como funciona o shorthand transition

A propriedade transition aceita uma lista de valores, onde cada conjunto de valores define uma transição para uma propriedade CSS específica.

Sintaxe:

.elemento {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Ordem dos valores:

• transition-property (obrigatório, a menos que seja all)
• transition-duration (obrigatório)
• transition-timing-function (opcional, padrão ease)
• transition-delay (opcional, padrão 0s)

Importante: Se você fornecer dois valores de tempo, o primeiro será interpretado como transition-duration e o segundo como transition-delay.

Exemplos:

1. Transição simples para uma propriedade:

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  /* Equivalente a:
     transition-property: background-color;
     transition-duration: 0.5s;
     transition-timing-function: ease; (padrão)
     transition-delay: 0s; (padrão)
  */
  transition: background-color 0.5s ease;
}

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

2. Transição para todas as propriedades animáveis:

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  /* Equivalente a:
     transition-property: all;
     transition-duration: 0.8s;
     transition-timing-function: linear;
     transition-delay: 0s; (padrão)
  */
  transition: all 0.8s linear;
}

.box:hover {
  background-color: red;
  width: 150px;
}

3. Transição com atraso:

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  /* Equivalente a:
     transition-property: width;
     transition-duration: 0.5s;
     transition-timing-function: ease; (padrão)
     transition-delay: 0.2s;
  */
  transition: width 0.5s ease 0.2s; /* Note a ordem: duration, timing-function, delay */
}

.box:hover {
  width: 150px;
}

4. Múltiplas transições para diferentes propriedades:

Você pode definir transições para várias propriedades em uma única declaração transition, separando cada conjunto de valores por vírgula.

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transform: translateX(0);
  /* Transição para background-color: 0.5s ease 0s
     Transição para width: 1s linear 0.2s
     Transição para transform: 0.8s ease-in-out 0.4s
  */
  transition: background-color 0.5s ease,
              width 1s linear 0.2s,
              transform 0.8s ease-in-out 0.4s;
}

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

Importante: A ordem dos valores dentro de cada transição é crucial, especialmente para duration e delay. O primeiro valor de tempo é sempre a duração, e o segundo (se houver) é o atraso.

Exemplo Prático:

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

    /* --- Exemplos de shorthand transition --- */

    .box-simple {
      transition: background-color 0.4s ease;
    }
    .box-simple:hover {
      background-color: #28a745;
    }

    .box-all {
      transition: all 0.6s linear;
    }
    .box-all:hover {
      background-color: #dc3545;
      width: 150px;
      transform: rotate(45deg);
    }

    .box-delay {
      transition: width 0.5s ease-out 0.2s; /* duration, timing-function, delay */
    }
    .box-delay:hover {
      width: 150px;
    }

    .box-multiple {
      transition: background-color 0.3s ease,
                  transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.1s,
                  width 0.4s linear 0.2s;
    }
    .box-multiple:hover {
      background-color: #ffc107;
      transform: translateX(50px) scale(1.1);
      width: 150px;
    }
  </style>
</head>
<body>
  <div class="box box-simple">Simples</div>
  <div class="box box-all">All</div>
  <div class="box box-delay">Com Atraso</div>
  <div class="box box-multiple">Múltiplas</div>
</body>
</html>

Resultado:

• Passe o mouse sobre cada caixa para observar os diferentes tipos de transições criadas com o shorthand transition.

Pontos Chave:

• Conveniência: O shorthand transition é uma forma concisa de definir todas as propriedades de transição.
• Ordem: A ordem dos valores é importante, especialmente para duration (primeiro valor de tempo) e delay (segundo valor de tempo).
• Múltiplas Transições: Use vírgulas para definir transições para diferentes propriedades em uma única declaração.
• Legibilidade: Embora seja um atalho, certifique-se de que seu código continue legível, especialmente ao lidar com múltiplas transições complexas.

Dominar o shorthand transition agiliza seu trabalho e mantém seu CSS mais limpo, permitindo que você crie efeitos de transição de forma eficiente.