Propriedade transition-property: O que vai mudar?

Especifique quais propriedades CSS terão uma transição (incluindo transform e filter).

Na lição anterior, você aprendeu que as Transições CSS criam mudanças suaves entre estados. Mas como o navegador sabe qual propriedade CSS deve ser animada? É aí que entra a propriedade transition-property.

A propriedade transition-property é como uma lista de compras para o navegador. Você diz a ele: "Ei, navegador, quando a background-color mudar, eu quero que você anime essa mudança. E também, quando o transform mudar, anime isso também!".

Como funciona transition-property

Esta propriedade especifica o nome das propriedades CSS para as quais a transição será aplicada. Se uma propriedade não estiver listada aqui, sua mudança será instantânea, mesmo que outras propriedades estejam sendo transicionadas.

Valores possíveis:

  1. none (padrão): Nenhuma propriedade terá transição. Todas as mudanças serão instantâneas.
  2. all: Todas as propriedades que podem ser transicionadas terão transição. Este é um valor muito comum e conveniente, mas pode não ser o mais performático se você tiver muitas propriedades mudando.
  3. nome-da-propriedade: O nome de uma propriedade CSS específica (ex: background-color, opacity, width, height, transform, filter, color, font-size, etc.).
  4. Lista de nomes de propriedades: Você pode listar várias propriedades separadas por vírgula.

Sintaxe:

.elemento {
  transition-property: <valor>;
}

Exemplos:

1. Transição para uma única propriedade:

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transition-property: background-color; /* Apenas a cor de fundo terá transição */
  transition-duration: 0.5s; /* Duração da transição */
}

.box:hover {
  background-color: red; /* Esta mudança será suave */
  width: 150px; /* Esta mudança será instantânea, pois 'width' não está na lista */
}

Resultado: Ao passar o mouse, a cor de fundo muda suavemente de azul para vermelho, mas a largura da caixa muda instantaneamente de 100px para 150px.

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

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transition-property: all; /* Todas as propriedades animáveis terão transição */
  transition-duration: 0.5s;
}

.box:hover {
  background-color: red; /* Suave */
  width: 150px; /* Suave */
  border-radius: 50%; /* Suave (de 0 para 50%) */
}

Resultado: Ao passar o mouse, a cor de fundo, a largura e o border-radius mudam suavemente.

3. Transição para múltiplas propriedades específicas:

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transform: translateX(0);
  transition-property: background-color, width, transform; /* Apenas estas terão transição */
  transition-duration: 0.5s;
}

.box:hover {
  background-color: red; /* Suave */
  width: 150px; /* Suave */
  transform: translateX(50px); /* Suave */
  height: 120px; /* Instantânea, pois 'height' não está na lista */
}

Resultado: A cor de fundo, a largura e a posição (transform) mudam suavemente. A altura muda instantaneamente.

Por que não usar all sempre?

Embora transition-property: all; seja conveniente, pode haver algumas desvantagens:

  • Performance: Se você tiver muitas propriedades CSS em um elemento, e apenas algumas delas precisam de transição, usar all pode forçar o navegador a monitorar e animar propriedades desnecessárias, potencialmente impactando a performance.
  • Controle: Você pode querer que algumas propriedades tenham uma duração ou função de tempo diferente das outras. Com all, todas usam as mesmas configurações (a menos que você as sobrescreva individualmente, o que anula a simplicidade do all).
  • Comportamento Inesperado: Algumas propriedades podem ter transições estranhas ou indesejadas se animadas.

Na maioria dos casos, para elementos simples com poucas propriedades mudando, all é perfeitamente aceitável. Para efeitos mais complexos ou para otimização, é melhor listar as propriedades específicas.

Exemplo Prático:

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

    .box-bg-only {
      transition-property: background-color; /* Apenas a cor de fundo */
      transition-duration: 0.5s;
    }
    .box-bg-only:hover {
      background-color: #28a745;
      width: 150px; /* Instantâneo */
      transform: rotate(45deg); /* Instantâneo */
    }

    .box-all {
      transition-property: all; /* Todas as propriedades animáveis */
      transition-duration: 0.5s;
    }
    .box-all:hover {
      background-color: #dc3545;
      width: 150px;
      transform: rotate(45deg);
      border-radius: 50%;
    }

    .box-specific {
      transition-property: background-color, transform; /* Apenas cor de fundo e transformação */
      transition-duration: 0.5s;
    }
    .box-specific:hover {
      background-color: #ffc107;
      width: 150px; /* Instantâneo */
      transform: rotate(45deg);
    }

    .box-none {
      transition-property: none; /* Nenhuma transição */
      transition-duration: 0.5s; /* Duração não importa aqui */
    }
    .box-none:hover {
      background-color: #6c757d;
      width: 150px;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box box-bg-only">BG Only</div>
  <div class="box box-all">All</div>
  <div class="box box-specific">Specific</div>
  <div class="box box-none">None</div>
</body>
</html>

Resultado:

  • Passe o mouse sobre cada caixa para observar como o transition-property controla quais mudanças são suaves e quais são instantâneas.

Pontos Chave:

  • Controle: transition-property dá a você controle preciso sobre quais propriedades CSS serão animadas.
  • all vs. Específico: Use all para simplicidade em casos simples, mas prefira listar propriedades específicas para maior controle e potencial otimização.
  • Propriedades Animáveis: Lembre-se que apenas propriedades que podem ter valores intermediários (como números, cores, ângulos) podem ser transicionadas.

Com transition-property, você define o "o quê" da sua transição, preparando o terreno para as outras propriedades que definirão o "como" e o "quando".