Style transition Property

Passe o mouse sobre um elemento div para mudar gradualmente sua aparência:

document.getElementById("myDIV").style.transition = "all 2s";

Definição e Uso

A propriedade de transição é uma propriedade estenográfica para as quatro propriedades de transição:

transitionProperty, transitionDuration, transitionTimingFunction e transitionDelay.

Note: Sempre especifique a propriedade transitionDuration, caso contrário, a duração é de 0, ea transição não terá nenhum efeito.

A propriedade de transição é suportada no Internet Explorer 10, Firefox, Opera e Chrome.

O Safari suporta uma alternativa, a propriedade WebkitTransition.

Nota: A propriedade de transição não é suportada no Internet Explorer 9 e versões anteriores.

Devolver a propriedade de transição:

object .style.transition

Defina a propriedade de transição:

object .style.transition=" Valores de propriedade

Valor	Descrição
transitionProperty	Especifica o nome da propriedade CSS o efeito de transição é para
transitionDuration	Especifica quantos segundos ou milissegundos o efeito de transição leva para completar
transitionTimingFunction	Especifica a curva de velocidade do efeito de transição
transitionDelay	Define quando o efeito de transição vai começar
initial	Define essa propriedade para seu valor padrão. Leia sobre inicial
inherit	Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar

Valor padrão:	todos 0 facilidade 0
Valor de retorno:	Uma corda, que representa a propriedade de um elemento de transição
CSS Versão	CSS3