Propriedade animation-timing-function

A propriedade animation-timing-function define a velocidade de variação (aceleração) da animação. Por exemplo, primeiro devagar, depois rápido, depois devagar, etc.

Sintaxe

seletor {
	animation-timing-function: valor;
}

Valores

Valor	Descrição
`ease`	Primeiro devagar, depois rápido, no final novamente devagar.
`ease-in`	Começa devagar e acelera gradualmente.
`ease-out`	Começa rápido e desacelera gradualmente até parar.
`ease-in-out`	Primeiro devagar, depois rápido, no final novamente devagar. Diferencia-se do ease pela velocidade.
`linear`	Sempre a mesma velocidade (constante).
`step-start`	Não há animação, a propriedade assume imediatamente o valor final.
`step-end`	Não há animação, a propriedade aguarda o tempo definido em `animation-duraton`, e então assume instantaneamente o valor final.
`steps`	O valor da propriedade muda em etapas (passos).
`cubic-bezier`	Curva de Bézier, que pode definir uma animação personalizada. Veja gerador de curvas de Bézier.

Valor padrão: ease.

Comparação dos diferentes valores

Passe o mouse sobre os blocos abaixo para ver o funcionamento de todos os tipos de funções de temporização:

Veja também

a propriedade animation,
que é uma propriedade abreviada para animações
a regra @keyframes,
que define os quadros-chave da animação
transições suaves transition, que representam uma animação ao passar o mouse sobre um elemento