Propriedade CSS transition-property

A propriedade CSS transition-property define quais propriedades de um elemento devem ser animadas quando seus valores mudam. Ela aceita uma lista separada por vírgulas de nomes de propriedades, ou a palavra-chave all para fazer a transição de todas as propriedades animáveis do elemento.

Por si só, transition-property não produz nenhum efeito visível — ela apenas nomeia os alvos. Você também precisa de um transition-duration maior que 0s para que a mudança seja gradual em vez de instantânea. Na maioria dos códigos, você define as quatro partes de uma vez com o atalho transition; transition-property é a propriedade individual que você usa quando deseja controlar o tempo de cada propriedade separadamente.

transition-property é uma das propriedades do CSS3.

O que pode e o que não pode ser transicionado

Uma propriedade é animável apenas quando o CSS sabe como calcular os valores intermediários entre um valor inicial e um valor final. Como regra geral:

Transicionável: qualquer coisa com um valor numérico ou de cor — width, height, opacity, color, background-color, transform, left/top, font-size, letter-spacing, box-shadow, entre outros.
Não transicionável: valores de palavras-chave discretas que não têm um ponto médio significativo — display, position, float, font-family. Alterá-las ocorre instantaneamente mesmo que você as liste em transition-property.

Aviso

Nem todas as propriedades no CSS podem ser transicionadas. Listar uma propriedade não animável (como display) não tem efeito — a mudança simplesmente ocorre imediatamente.

Informação

Os prefixos de fornecedor (ex.: -webkit-, -moz-, -o-) não são mais necessários para transições CSS em navegadores modernos.

Valor Inicial	all
Aplica-se a	Todos os elementos, pseudo-elementos ::before e ::after.
Herdada	Não.
Animável	Não (controla quais propriedades são animadas, mas não é animada em si).
Versão	CSS3
Sintaxe DOM	object.style.transitionProperty = "height";

Nota: No CSS moderno, é recomendado usar a propriedade abreviada transition.

Sintaxe

Valores de CSS transition-property

transition-property: none | all | property | initial | inherit;

Exemplo da propriedade transition-property:

Exemplo de código CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: height;
      }
      div:hover {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Aqui apenas height é animado. Como width não está listado, ele mudaria instantaneamente — e é exatamente por isso que nomear as propriedades é importante.

Exemplo da propriedade transition-property com width e height transicionados:

Outro exemplo de código CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: width, height;
      }
      div:hover {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Os dois nomes de propriedade são separados por vírgula. Você também poderia escrever transition-property: all para animar ambos de uma vez, mas listá-los explicitamente evita animar acidentalmente propriedades que você não pretendia.

Exemplo da propriedade transition-property com cor de fundo transicionada:

Exemplo de transition-property com cor de fundo transicionada:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: #666666;
        transition-duration: 1s;
        transition-property: background-color;
      }
      div:hover {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade transition-property com cor de fundo e deslocamento de posição esquerda transicionados:

Exemplo de transition-property com cor de fundo e transição de deslocamento de posição esquerda

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        cursor: pointer;
        background-color: #8ebf42;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      }
      .element:hover {
        left: 250px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Hover over the box to see the element's background color and left position offset transition.</p>
      <div class="element"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Observe como a lista separada por vírgulas é alinhada por posição: a primeira propriedade (background-color) usa a primeira duração e a primeira função de temporização, enquanto a segunda propriedade (left) usa a segunda de cada uma. Esse emparelhamento posicional permite que cada propriedade anime com seu próprio transition-duration e transition-timing-function — algo que a palavra-chave all não consegue fazer.

Exemplo da propriedade transition-property com fonte transicionada:

Exemplo de CSS transition-property com as propriedades letter-spacing, font-size e line-height

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        font-family: sans-serif;
        transition-duration: 0.6s;
        letter-spacing: 1px;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
        transition-property: letter-spacing, font-size, line-height;
      }
      span:hover {
        color: #0f9881;
        letter-spacing: 6px;
        font-size: 26px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <span>Hover over the text to see the effect</span>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
none	Nenhum efeito de transição será aplicado.
all	O efeito de transição será aplicado a todas as propriedades.
property	Especifica uma lista separada por vírgulas de nomes de propriedades CSS para o efeito de transição.
initial	Define esta propriedade com seu valor padrão.
inherit	Herda esta propriedade do elemento pai.

Propriedades relacionadas

transition-property é uma das quatro propriedades individuais que compõem uma transição. Você quase sempre as usa juntas:

transition-duration — quanto tempo dura a animação.
transition-timing-function — a curva de aceleração (ease, linear, cubic-bezier).
transition-delay — quanto tempo aguardar antes de iniciar.
transition — o atalho que define as quatro em uma única declaração.

Prática

Qual afirmação está correta sobre transition-property?

Todas as propriedades no CSS podem ser transicionadas.O valor 'all' pode ser usado.Não é possível usar nomes de propriedades separados por vírgula.