Atributo Style transition

Definição e uso

transition O atributo é uma abreviação dos quatro atributos de transição:

Notas:Sempre defina Atributo transitionDurationCaso contrário, o tempo de duração será 0 e a transição será inválida.

Veja também:

Manual de referência CSS:Atributo transition

Exemplo

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

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

Experimente você mesmo

Sintaxe

Retorne o atributo transition:

object.style.transition

Defina o atributo transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

Valor do atributo

Valor Descrição
transitionProperty Determina o nome da propriedade CSS que o efeito de transição afeta.
transitionDuration Determina quantos segundos ou milissegundos o efeito de transição leva para ser concluído.
transitionTimingFunction Determina a curva de velocidade do efeito de transição.
transitionDelay Define quando o efeito de transição começa.
initial Defina essa propriedade para seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: all 0 ease 0
Retorno: cadeia de caracteres, que representa o Atributo transition.
Versão do CSS: CSS3

Suporte do navegador

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1