Propriedade transition-timing-function

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

Sintaxe

cssseletor {
  transition-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.
`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 `transition-duraton`, e então assume instantaneamente o valor final.
`steps`	O valor da propriedade muda em etapas (saltos).
`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 apresentados abaixo, para ver o funcionamento de todos os tipos de funções de temporização:

Exemplo

Passe o mouse sobre o bloco - ele mudará suavemente sua largura em 2 segundos. Como o valor ease-in está definido, a animação começará devagar e acelerará gradualmente:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Veja também

a propriedade transition-duration,
que define a duração da transição suave
a propriedade transition-property,
que define o nome da propriedade para a transição suave
a propriedade transition-delay,
que define o atraso antes da transição suave
a propriedade transition,
que é uma abreviação para a transição suave
a propriedade animation,
com a qual é possível criar uma animação