Propriedade de transição de estilo
Exemplo
Passe o mouse sobre um elemento div para alterar gradualmente sua aparência:
document.getElementById("myDIV").style.transition = "all 2s";
Definição e uso
A propriedade de transição é uma propriedade abreviada para as quatro propriedades de transição:
transitionProperty, transitionDuration, transitionTimingFunction e transitionDelay.
Nota: Sempre especifique a propriedade transitionDuration, caso contrário, a duração será 0 e a transição não terá efeito.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
Sintaxe
Retorne a propriedade de transição:
object.style.transition
Defina a propriedade de transição:
object.style.transition = "property duration timing-function delay|initial|inherit"
Valores de propriedade
Value | Description |
---|---|
transitionProperty | Specifies the name of the CSS property the transition effect is for |
transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transitionTimingFunction | Specifies the speed curve of the transition effect |
transitionDelay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Detalhes técnicos
Valor padrão: | todos 0 facilidade 0 |
---|---|
Valor de retorno: | Uma String, representando a propriedade de transição de um elemento |
Versão CSS | CSS3 |
Páginas relacionadas
Referência CSS: propriedade de transição
❮ Objeto de estilo