Atributo animation-timing-function CSS

Definição e uso

função-de-tempo-de-animação Especifica a curva de velocidade da animação.

Curvas de velocidade definem o tempo que a animação leva para passar de um conjunto de estilos CSS para outro.

Curvas de velocidade são usadas para tornar as mudanças mais suaves.

Veja também:

Tutorial de CSS3:Animação CSS

Manual do HTML DOM:Propriedade animationTimingFunction

Exemplo

Exemplo 1

Reproduzir a animação com a mesma velocidade de início ao fim:

div
{
função-de-tempo-de-animação:2s;
}

Experimente por conta própria

Exemplo 2

Para entender melhor os diferentes valores das funções de tempo, aqui estão cinco elementos div com cinco valores diferentes:

#div1 {função-de-tempo-de-animação: linear;}
#div2 {função-de-tempo-de-animação: suave;}
#div3 {função-de-tempo-de-animação: entrar-suave;}
#div4 {função-de-tempo-de-animação: sair-suave;}
#div5 {função-de-tempo-de-animação: suave-entrar-e-sair;}

Experimente por conta própria

Exemplo 3

Como no exemplo anterior, mas define a curva de velocidade através da função cubic-bezier:

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

Experimente por conta própria

Sintaxe do CSS

animation-timing-function: value;

A propriedade animation-timing-function usa a função matemática chamada função cubic-bezier para gerar a curva de velocidade. Você pode usar seus próprios valores ou valores pré-definidos:

Valor Descrição teste
linear A velocidade da animação é a mesma de início ao fim. teste
suave Padrão. A animação começa lentamente, acelera e diminui antes de terminar. teste
ease-in A animação começa lentamente. teste
ease-out A animação termina lentamente. teste
ease-in-out A animação começa e termina lentamente. teste
cubic-bezier(n,n,n,n) Nos próprios valores da função cubic-bezier. Os valores possíveis são números de 0 a 1.

Dica:Experimente usar diferentes valores na função "Experimente por conta própria" abaixo.

Detalhes técnicos

Valor padrão: suave
Herança: não
Versão: CSS3
Sintaxe do JavaScript: objeto.style.animationTimingFunction="linear"

Suporte do navegador

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

Os números com -webkit-, -moz- ou -o- antes indicam a primeira versão com suporte ao prefixo.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-