Gerador de cubic-bezier (easing CSS)
Escolha uma curva pronta ou digite os pontos e copie o cubic-bezier para transition ou animation.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
As palavras-chave e suas curvas
| Palavra-chave | Curva equivalente |
|---|---|
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | cubic-bezier(0.42, 0, 1, 1) |
| ease-out | cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
O linear não é uma curva de Bézier: ele sai como a própria palavra linear.
Curva personalizada
Os pontos x1, y1, x2 e y2 são digitados em centésimos (25 vira 0.25). Os x ficam entre 0 e 1, como a especificação exige; os y podem passar de 0 a 1 para dar recuo ou ultrapassagem, aqui de -1 a 2. Com 68, -55, 27 e 155 o valor é cubic-bezier(0.68, -0.55, 0.27, 1.55).
Escolhendo a propriedade animation em vez de transition, a declaração fica: animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
Perguntas frequentes
Como funciona o cubic bezier css?
A curva liga dois pontos fixos, (0,0) e (1,1), com dois pontos de controle. O primeiro controla a largada e o segundo a chegada; o x é o tempo e o y, o progresso da animação.
Como usar o cubic bezier generator para um efeito com recuo?
Use um y negativo no primeiro ponto. Com 68, -55, 27 e 155 o resultado é cubic-bezier(0.68, -0.55, 0.27, 1.55)