Manual de referência CSS

CSS @regras (RULES)

大全 de atributos CSS

CSS unicode-Atributo bidi CSS3 transition-Atributo property

CSS3 transition-timing-Método de uso e exemplo da propriedade função

transition-timing-A função propriedade CSS especifica a velocidade do efeito de transição. Essa propriedade permite que um efeito de transição mude a velocidade de sua duração.

A tabela a seguir fornece a descrição de uso e histórico de versões dessa propriedade, bem como a sintaxe de uso no script JavaScript.

Valor padrão:	ease
Aplicável para:	Todos os elementos::before e::after Elementos pseudo
Herança:	Nenhum
Animável:	Não.Veja: Propriedades de animação.
Versão:	CSS3nova funcionalidade
Sintaxe do JavaScript:	objeto.style.transitionTimingFunction="ease-in"

transition-timing-Uso da sintaxe da função

A sintaxe dessa propriedade é a seguinte:

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

O exemplo a seguir demonstra como usar transition-timing-Atributo function.

Exemplo

button　{
　　　　background:　#fd7c2a;
　　　　/*　Para Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　　　-webkit-transition-timing-function:　linear;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
　　　　　　transition-timing-function:　linear;
}
button:hover　{
　　　　background:　#3cc16e;
}

Teste e veja‹/›

Valores de atributo

A tabela a seguir descreve os valores dessa propriedade.

Valores	Descrição
linear	Especifique a transição que ocorre a uma velocidade constante do estado inicial ao estado final.
ease	Semelhante ao fade in e fade out, embora comece a acelerar mais rápido no início e já esteja desacelerando perto do meio.
ease-in	Especifique a transição que começa lentamente e então acelera até alcançar o estado final e a transição termina abruptamente.
ease-out	Especifique a transição que começa rapidamente e então se torna mais lenta perto do estado final.
ease-in-out	Especifique a transição para o estado final, a transição começa devagar, depois acelera e depois desacelera.
cubic-bezier(n,n,n,n)	Define uma curva de Bézier de terceiro grau. Também conhecida como curva de velocidade. Os valores possíveis são de 0 a1entre os valores.
initial	Defina essa propriedade para seu valor padrão.
inherit	Se especificado, o elemento relacionado usa a propriedade transition do elemento pai-timing-O valor do atributo function.

Compatibilidade do navegador

transition-timing-Atributo function da propriedade da função do navegador tem compatibilidade, os números na tabela a seguir representam a versão mais baixa do navegador que suporta essa propriedade; todos os navegadores populares suportam essa propriedade.

	Firefox 4+ ^-moz-,16 + Google Chrome 4+ ^-webkit-,26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-,6.1+ Opera 10.5+ ^-o-,12.1+