Curva cubic-bezier
Crie uma curva de animação CSS arrastando as pegas, com pré-visualização animada.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Desenhe a sua curva de animação
Arraste as duas pegas no gráfico para moldar o easing, veja a bola animada reproduzir o movimento e copie o valor cubic-bezier() para o seu CSS.
-
Parta de uma predefinição
ease, ease-in-out, linear…
-
Ajuste as pegas
X = tempo (0–1), Y livre para o ressalto.
-
Copie o CSS
Cole em transition ou animation.
As predefinições CSS
| Nome | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (0.25, 0.1, 0.25, 1) |
| ease-in | (0.42, 0, 1, 1) |
| ease-out | (0, 0, 0.58, 1) |
| ease-in-out | (0.42, 0, 0.58, 1) |
X limitado a [0,1], Y pode ultrapassar nos ressaltos. Pré-visualização via Web Animations API, tudo fica local.
Perguntas frequentes
O que é uma curva cubic-bezier?
É a função de tempo que descreve como uma animação acelera e desacelera. Define-se por dois pontos de controlo (x1, y1, x2, y2). Em CSS: transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).
Porque podem os valores Y ultrapassar 1?
Os X ficam entre 0 e 1 (o tempo), mas os Y podem sair de [0,1] para criar um efeito de ressalto ou ultrapassagem (o elemento vai mais longe e volta). É assim que se obtêm as curvas «back» e elásticas.
Como o uso no meu CSS?
Cole o valor em transition: all 0.3s cubic-bezier(…) ou em animation-timing-function. A pré-visualização animada mostra o resultado real antes de colar.
Quais são as predefinições padrão?
ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1). Parta de uma predefinição e ajuste as pegas.