Propriedade Style animationTimingFunction

Definição e uso

animationTimingFunction Defina a curva de velocidade da animação.

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

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

Exemplo

Mude a propriedade animationTimingFunction do elemento <div>:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

Experimente você mesmo

Sintaxe

Retorne a propriedade animationTimingFunction:

objeto.style.animationTimingFunction

Defina a propriedade animationTimingFunction:

objeto.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

Valor da propriedade

Valor Descrição
linear A velocidade da animação é a mesma de ponta a ponta.
ease Valor padrão. A animação começa lentamente, acelera e termina lentamente.
ease-in A animação começa lentamente.
ease-out A animação termina lentamente.
ease-in-out A animação tem início e fim lentos.
cubic-bezier(n, n, n, n)

Defina seus próprios valores no funil cúbico.

Os valores possíveis são números de 0 a 1.
initial Defina essa propriedade para seu valor padrão. Veja também initial.
inherit Herda essa propriedade do elemento pai. Veja também inherit.

Detalhes técnicos

Valor padrão: ease
Retorno: String que representa o Propriedade animation-timing-function.
Versão do CSS: CSS3

Suporte do navegador

animationTimingFunction é uma característica do CSS3 (1999).

Todos os navegadores suportam completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Suporte Suporte Suporte Suporte Suporte 11

Páginas relacionadas

Manual de referência do CSS:Propriedade animation-timing-function