propriedade de transição CSS3
Exemplos
Passe o mouse sobre um elemento div, e gradualmente mudar a largura da tabela a partir de 100px para 300px ::
div
{
width: 100px;
transição: largura 2s;
-webkit-transição: 2s largura; / * Safari * /
}
div: hover {width: 300px;}
{
width: 100px;
transição: largura 2s;
-webkit-transição: 2s largura; / * Safari * /
}
div: hover {width: 300px;}
tente »
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.
| 属性 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Atributo definições e instruções
propriedade de transição é uma propriedade estenográfica tem quatro atributos: a transição de propriedade, a transição de duração,-timing de função de transição, e de transição de atraso.
Nota: Sempre especifique propriedades de transição de duração, caso contrário duração 0, a transição não terá nenhum efeito.
| padrão: | todos 0 facilidade 0 |
|---|---|
| herança: | não |
| versão: | CSS3 |
| sintaxe JavaScript: | objeto .style.transition = "width 2s" |
gramática
transição: propriedade-função de temporização duração de atraso;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
