Pular para o conteúdo
Menu

Curvas de animação

Várias bolinhas fazem a mesma viagem no mesmo tempo, cada uma com uma curva de animação diferente: linear, suave, com freio, elástica, quicando. Depois você desenha a sua própria curva e vê a bolinha obedecer.

Como usar

  1. 01Aperte play e compare o movimento das bolinhas.
  2. 02Arraste as duas alças da curva roxa para criar a sua.
  3. 03Veja o código CSS da curva pronto para copiar.

Mouse ou dedoToque

experimento ao vivo
Carregando o experimento…
Como isso funciona?

01Uma curva de animação transforma o tempo em progresso. Na linear, metade do tempo é metade do caminho; numa curva suave, a bolinha acelera no começo e freia no fim, como objetos reais.

02A curva editável é uma Bézier cúbica: duas alças definem o formato. É exatamente o que o CSS usa em cubic-bezier().

03Elástica e quicando não são Bézier: são fórmulas que passam do ponto final e voltam, imitando mola e gravidade.