A propriedade CSS transition-timing-function

Definição e uso

A propriedade transition-timing-function define a curva de velocidade do efeito de transição.

Esta propriedade permite que o efeito de transição mude sua velocidade ao longo do tempo.

Veja também:

Tutorial de CSS:Transições CSS

Manual de referência do HTML DOM:Atributo transitionTimingFunction

Exemplo

Exemplo 1

Efeitos de transição com a mesma velocidade de início a fim:

div
{
transition-timing-function: linear;
}

Experimente pessoalmente

Sintaxe do CSS

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

Valor do atributo

Valor Descrição
linear Definir efeitos de transição que começam e terminam com a mesma velocidade (igual a cubic-bezier(0,0,1,1)).
ease Definir efeitos de transição que começam lentamente, aceleram e terminam lentamente (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Definir efeitos de transição que começam lentamente (igual a cubic-bezier(0.42,0,1,1)).
ease-out Definir efeitos de transição que terminam lentamente (igual a cubic-bezier(0,0,0.58,1)).
ease-in-out Definir efeitos de transição que começam e terminam lentamente (igual a cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) Definir seus próprios valores no função cubic-bezier. Os valores possíveis são números entre 0 e 1.

Dica:Teste diferentes valores nos exemplos para entender melhor como eles funcionam.

Detalhes técnicos

Valor padrão: ease
Herança: não
Versão: CSS3
Sintaxe JavaScript: object.style.transitionTimingFunction="linear"

Mais exemplos

Exemplo 2

Para entender melhor diferentes valores de função, veja os cinco diferentes elementos div com cinco diferentes valores abaixo:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Experimente pessoalmente

Exemplo 3

Como no exemplo anterior, mas define a curva de velocidade usando cubic-bezier:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Experimente pessoalmente

Suporte do navegador

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

Números com -webkit-, -moz- ou -o- indicam a primeira versão com prefixo usada.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-