Transition timing function
O transition-timing-function
define a forma como uma transformação é aplicada ao longo do tempo. Se é aplicada de forma constante ou mais rápido/devagar em determinada parte.
Exemplo:
Imagine que estamos a transformar a posição de um elemento, e por isso a movimenta-lo, ele não tem que se movimentar sempre à mesma velocidade. Pode ir mais rápido numas partes e mais lento noutras.
Antes de analisar as várias opções deixo aqui a nota que:
linear
ease
ease-in
ease-out
ease-in-out
São casos particulares de cubic-bezier
e por isso representáveis apenas com cubic-bezier
. Eles foram criados para que fosse mais simples de se aplicar um transition-timing-function
sem ter que se configurar vários valores.
Linear
Este é o mais simples, e representa uma animação constante ao longo do tempo.

O gráfico mostra o quanto o valor da propriedade muda em relação ao tempo. O eixo dos x
representa o tempo, e o eixo do y
representa a propriedade animada, seja esta color
, background-color
, left
, etc...
Os gráficos tem como limites 0
e 1
pois são percentuais, logo 0
representa 0%
e 1
representa 100%
.
setInterval(function(){
const cs = document.getElementById("caixa").style;
cs.marginLeft = cs.marginLeft == "300px" ? "0px" : "300px";
}, 3000);
div {
width:100px; height:100px; background-color:lightBlue;
transition: margin-left 1.5s linear; /*linear*/
}
<div id="caixa"></div>
Enquadrando esta animação com o gráfico, teríamos como propriedade margin-left
. Logo iria representar o quanto o margin-left
muda à medida que o tempo avança. Olhando para o gráfico que representa y = x
vê-se que o margin-left
aumenta em proporção com o tempo dando uma animação constante ao longo do tempo.
Ease In
Lento no inicio e vai acelerando até normalizar no fim.

Note no entanto que a curva é bastante suave, logo o efeito é muito subtil, mas olhando com atenção vê-se que é mais rápido no inicio.
setInterval(function(){
const cs = document.getElementById("caixa").style;
cs.marginLeft = cs.marginLeft == "300px" ? "0px" : "300px";
}, 3000);
div {
width:100px; height:100px; background-color:lightBlue;
transition: margin-left 1.5s ease-in; /*ease-in*/
}
<div id="caixa"></div>
Ease Out
Este é normal no inicio e vai abrandando no fim.

Assim como o anterior este efeito também é bastante subtil.
setInterval(function(){
const cs = document.getElementById("caixa").style;
cs.marginLeft = cs.marginLeft == "300px" ? "0px" : "300px";
}, 3000);
div {
width:100px; height:100px; background-color:lightBlue;
transition: margin-left 1.5s ease-out; /*ease-out*/
}
<div id="caixa"></div>
Ease In Out
Este é uma combinação dos dois ficando lento no inicio, normal a meio e lento no fim.

setInterval(function(){
const cs = document.getElementById("caixa").style;
cs.marginLeft = cs.marginLeft == "300px" ? "0px" : "300px";
}, 3000);
div {
width:100px; height:100px; background-color:lightBlue;
transition: margin-left 1.5s ease-in-out; /*ease-in-out*/
}
<div id="caixa"></div>
Ease
Muito parecido ao ease-in-out
mas com a diferença de que acelera mais rapidamente no inicio, e começa a abrandar a menos de metade do caminho.

setInterval(function(){
const cs = document.getElementById("caixa").style;
cs.marginLeft = cs.marginLeft == "300px" ? "0px" : "300px";
}, 3000);
div {
width:100px; height:100px; background-color:lightBlue;
transition: margin-left 1.5s ease; /*ease*/
}
<div id="caixa"></div>
Cubic Bezier
Define a transição na forma de:
cubic-bezier (x1, y1, x2, y2)
Em que implica que temos 2 pontos dados tanto em x
, o tempo, como em y
o valor da propriedade.
Logo um cubic-bezier
de (0.1,0.45,0.8,1)
indica que a 10%
do tempo o valor da propriedade vai a 45%
e a 80%
do tempo o valor já vai nos 100%
.
Isto permite representar animações bem mais personalizadas!
Como por exemplo:

Que é bastante rápido no inicio, muito lento no meio, e bastante rápido no fim.
setInterval(function(){
const cs = document.getElementById("caixa").style;
cs.marginLeft = cs.marginLeft == "300px" ? "0px" : "300px";
}, 3000);
div {
width:100px; height:100px; background-color:lightBlue;
transition: margin-left 1.5s cubic-bezier(0.035,0.99,0.99,0.09); /*cubic-bezier*/
}
<div id="caixa"></div>
Assim como mencionei atrás todas as outras funções de transição são construídas á base desta. Segue uma lista destas e respetiva correspondência em cubic-bezier
:
linear
- cubic-bezier(0,0,1,1)
ease-in
- cubic-bezier(0.42,0,1,1)
ease-out
- cubic-bezier(0,0,0.58,1)
ease-in-out
- cubic-bezier(0.42,0,0.58,1)
ease
- cubic-bezier(0.25,0.1,0.25,1)
Isto também permite criar variantes dos tipos representaveis por cubic-bezier
mas mais notórios.
Como exemplo, podia-se criar uma versão bem mais evidente do ease-in
com:
cubic-bezier(0.9,0,1,1)
Cujo gráfico seria:

setInterval(function(){
const cs = document.getElementById("caixa").style;
cs.marginLeft = cs.marginLeft == "300px" ? "0px" : "300px";
}, 3000);
div {
width:100px; height:100px; background-color:lightBlue;
transition: margin-left 1.5s cubic-bezier(0.9,0,1,1); /*cubic-bezier*/
}
<div id="caixa"></div>
Steps
Define a animação à custa de passos dividindo o espaço de tempo pela quantidade de passos. Também tem em consideração se a animação é feita no inicio ou no fim daquele passo.
A notação é :
steps(quantidade, start | end);
Start
Com start
a animação é definida no inicio de cada passo.
Exemplificando, steps(4, start)
indica que a animação tem 4 passos e é feita no inicio.
setInterval(function(){
const cs = document.getElementById("caixa").style;
cs.marginLeft = cs.marginLeft == "300px" ? "0px" : "300px";
}, 3000);
div {
width:100px; height:100px; background-color:lightBlue;
transition: margin-left 1.5s steps(4,start); /*steps start*/
}
<div id="caixa"></div>
End
Na variante end
a animação é definida no fim de cada passo, e segue a mesma sintaxe que a anterior apenas trocando a palavra start
por end
setInterval(function(){
const cs = document.getElementById("caixa").style;
cs.marginLeft = cs.marginLeft == "300px" ? "0px" : "300px";
}, 3000);
div {
width:100px; height:100px; background-color:lightBlue;
transition: margin-left 1.5s steps(7,end); /*steps end*/
}
<div id="caixa"></div>
Links relevantes:
Nota: Peço desculpa pelo CSS do snippet estar formatado de forma estranha, mas foi para ocupar menos espaço uma vez que a resposta é bastante grande.