Gerador Cubic Bezier

Animação CSS com o ease padrão costuma ficar sem personalidade, e acertar os quatro números de um cubic-bezier na mão vira tentativa e erro: muda um decimal, recarrega, ainda não era isso. Aqui você arrasta os dois pontos de controle direto no gráfico, aperta Reproduzir para ver a bolinha percorrer o trajeto na duração que definir e copia o valor já formatado para transition-timing-function e animation-timing-function.

No gráfico, o eixo X é o tempo e o Y é o progresso da animação. Há uma regra que o gerador aplica sozinho: X1 e X2 ficam travados entre 0 e 1, porque fora disso a curva deixa de ser uma função válida do tempo e o navegador descarta o valor inteiro. Já Y1 e Y2 podem ultrapassar esses limites de propósito: é assim que nasce o overshoot, o efeito de passar do destino e voltar. O preset back usa cubic-bezier(0.68, -0.55, 0.27, 1.55) exatamente por isso.

Parta de um preset e mexa pouco: diferenças de 0.05 já mudam a sensação do movimento. Teste com a duração real do seu projeto, porque uma curva que parece ótima em 1500 ms pode ficar brusca em 300 ms; o campo aceita de 200 a 5000 ms. E lembre que overshoot só aparece em propriedades que aceitam passar do valor final, como transform: em opacity o navegador corta em 0 e 1. A página roda inteira no seu navegador, nada é enviado a servidor.