Gerador de curvas cubic-bezier

A curva de aceleração (timing function) decide como avança no tempo uma transição ou animação CSS. Arraste os dois pontos de controlo, teste o resultado na animação de exemplo e copie o valor cubic-bezier().

O que é o cubic-bezier()?

As propriedades transition-timing-function e animation-timing-function (ou o terceiro valor de transition) indicam como a mudança se distribui ao longo da duração. cubic-bezier(x1, y1, x2, y2) define uma curva de Bézier cúbica que começa em (0, 0) e termina em (1, 1) com dois pontos de controlo: o eixo X é o tempo e o Y, o progresso.

As palavras-chave do CSS são curvas predefinidas: ease equivale a cubic-bezier(0.25, 0.1, 0.25, 1), ease-in a (0.42, 0, 1, 1), ease-out a (0, 0, 0.58, 1) e ease-in-out a (0.42, 0, 0.58, 1). As easeIn…/easeOut… são as curvas clássicas de Robert Penner, muito usadas em bibliotecas de animação.

Conselhos

Os valores X têm de estar entre 0 e 1, mas os Y podem sair desse intervalo: abaixo de 0 ou acima de 1 a animação «passa do ponto» e volta, um efeito de ressalto suave como o do easeOutBack. Para elementos que aparecem no ecrã costumam funcionar melhor as curvas de saída (ease-out), que começam rápido e travam no fim; para os que saem, as de entrada (ease-in).

As durações de 150 a 400 ms são as mais habituais em interfaces. Lembre-se de respeitar a preferência prefers-reduced-motion de quem prefere menos animações.