A propriedade CSS transition-property

Definição e uso

A propriedade transition-property define o nome da propriedade CSS que aplica o efeito de transição. (O efeito de transição começará quando a CSS propriedade especificada mudar).

Dica:Os efeitos de transição geralmente ocorrem quando o usuário move o ponteiro do mouse sobre o elemento.

Notas:Sempre defina transition-duration Se a propriedade não for especificada, o efeito de transição não será gerado, a menos que o tempo seja 0.

Veja também:

Tutorial CSS:Transição CSS

Manual de referência HTML DOM:Propriedade transitionProperty

Exemplo

Coloque o ponteiro do mouse no elemento div e será gerado um efeito de transição suave na alteração da largura do elemento:

div {
  transition-property: largura;
}

Experimente você mesmo

Sintaxe CSS

transition-property: nada|todos|propriedade;

Valor da propriedade

Valor Descrição
nada Nenhuma propriedade receberá efeito de transição.
todos Todas as propriedades receberão efeito de transição.
propriedade Define uma lista de nomes de propriedades CSS que aplicam efeitos de transição, separados por vírgula.

Detalhes técnicos

Valor padrão: todos
Herança: não
Versão: CSS3
Sintaxe JavaScript: objeto.style.transitionProperty="largura,altura"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Números com -webkit-, -moz- ou -o- indicam a primeira versão com prefixo usada.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-