A transition-propertypropriedade, normalmente usada como transitionabreviatura, é usada para definir a qual propriedade, ou propriedades, você deseja aplicar um efeito de transição.
Isso é feito fornecendo o nome da propriedade como o valor:
.example ( transition-property: color; )O valor pode ser um dos seguintes:
- Um único nome de propriedade, como no exemplo acima
- Uma lista separada por vírgulas de nomes de propriedades (abreviada ou longa), para fazer a transição de várias propriedades em um único elemento
- A palavra-chave
none, que indica que nenhuma propriedade fará a transição - A palavra-chave
all, que indica que todas as propriedades farão a transição (o padrão)
Quando vírgula separando os valores, os nomes das propriedades são essencialmente mapeada para as outras propriedades de transição definidos ( transition-timing-function, transition-duration, e transition-delay). Portanto, isso significa que se uma lista de propriedades separadas por vírgula incluir um ou mais nomes de propriedade inválidos, as outras propriedades ainda farão a transição e serão mapeadas para suas propriedades de transição relacionadas pretendidas.
A especificação descreve isso dizendo:
“As propriedades (U) não reconhecidas ou não animáveis devem ser mantidas na lista para preservar a correspondência dos índices.”
Ao usar um valor de noneou as palavras inherit- chave universais ou initial, esses valores não podem ser usados como parte de uma lista separada por vírgulas, caso contrário, isso resultará em um erro de sintaxe e a linha inteira será ignorada.
Para compatibilidade em todos os navegadores compatíveis, os prefixos do fornecedor são necessários, com a sintaxe padrão declarada por último:
.example ( -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )O IE10 (a primeira versão estável do IE com suporte transition-property) não requer o -ms-prefixo.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | 4+ | 10,5+ | 10+ | 2.1+ | 3,2+ |