CSS3 Métodos de uso e exemplos da propriedade de transição

A propriedade de transição CSS permite que você defina a transição entre dois efeitos de estado do elemento. Isso étransition-property，transition-duration，transition-timing-functionEtransition-delayAtributo abreviado

A tabela a seguir fornece a descrição de uso e histórico de versão deste atributo, bem como a sintaxe de uso no script JavaScript.

Sintaxe de uso do transition

A sintaxe dessa propriedade é a seguinte:

transition:　transition1　,　transition2, ... transitionN]　|　initial　|　inherit
　　　　　　　　　　　　onde transition é:　[　transition-property　|　transition-duration　|　transition-timing-function　|　transition-delay　]

O exemplo a seguir demonstra como usar o atributo transition.

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition-property:　background　2s;　/*　Para　Safari　3.0+　*/
　　　　transition:　background　2s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

Valor da propriedade

A tabela a seguir descreve os valores dessa propriedade.

Compatibilidade do navegador

Compatibilidade do navegador do atributo transition, os números na tabela abaixo representam a versão mínima do navegador que suporta essa propriedade; todos os navegadores populares suportam essa propriedade.

Leia mais

Consulte a seguinte教程：CSS3 Transições。

Propriedades relacionadas:transition-delay，transition-duration，transition-property，transition-timing-function。