Propriedade de propriedade de transição de estilo
Exemplo
Passe o mouse sobre um elemento div para alterar gradualmente sua largura e altura:
document.getElementById("myDIV").style.transitionProperty = "width,height";
Definição e uso
A propriedade transitionProperty especifica o nome da propriedade CSS para a qual o efeito de transição se destina (o efeito de transição começará quando a propriedade CSS especificada for alterada).
Dica: Normalmente, um efeito de transição pode ocorrer quando um usuário passa o mouse sobre um elemento.
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 | |||||
---|---|---|---|---|---|
transitionProperty | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransitionProperty |
12.1 |
Sintaxe
Retorne a propriedade transitionProperty:
object.style.transitionProperty
Defina a propriedade transitionProperty:
object.style.transitionProperty = "none|all|property|initial|inherit"
Valores de propriedade
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
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: | tudo |
---|---|
Valor de retorno: | Uma String, representando a propriedade de propriedade de transição de um elemento |
Versão CSS | CSS3 |
Páginas relacionadas
Referência CSS: propriedade de propriedade de transição
❮ Objeto de estilo