Curvas de animação
O segredo de toda animação boa: o ritmo. Compare curvas e edite a sua.
experimento ao vivo
As esferas já estão em movimento. Compare como cada uma acelera e desacelera; “Recomeçar” repete a corrida.
Como usar
- Arraste as duas alças da curva roxa para criar a sua.
- Veja o código CSS da curva pronto para copiar.
Carregando o experimento…
Mouse ou dedoToque
Sobre este experimento
Várias esferas 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 esfera obedecer.
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 esfera 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.