Gerador visual de cubic-bezier para easing no CSS
Este gerador de cubic-bezier permite criar curvas de easing CSS personalizadas no olho, em vez de no chute. Arraste dois pontos de controle, veja a curva mudar em tempo real e copie o valor exato de cubic-bezier() para suas transitions e animations.
Ele foi feito para desenvolvedores front-end, designers de UI e qualquer pessoa que ajuste movimento e esteja cansada de digitar quatro números no escuro. Comece por uma das 29 predefinições e depois mexa nos controles até o seu ease-in, ease-out ou bounce ficar exatamente do jeito certo.
Como usar o editor
Molde sua curva
Arraste os dois controles dos pontos no canvas para curvar a easing. O controle P1 molda o início do movimento e o controle P2 molda o fim. As coordenadas aparecem conforme você arrasta.
Digite valores exatos
Prefere precisão? Digite os quatro números nos campos abaixo do canvas. Os valores de X ficam entre 0 e 1, enquanto os de Y podem variar de -0,5 a 1,5 para efeitos de overshoot.
Parta de uma predefinição
Clique em qualquer uma das 29 predefinições para aplicá-la na hora e continue ajustando. Os padrões do CSS (linear, ease, ease-in, ease-out, ease-in-out) e as oito famílias de Penner estão todos a um clique.
Veja o movimento
Observe a bolinha animada se mover com a sua curva. Ative Comparar para colocá-la em corrida contra o movimento linear e arraste o controle de Duração para testar velocidades de 200ms a 3 segundos.
Copie o CSS
Clique em Copiar para pegar tanto transition-timing-function quanto animation-timing-function. Você também pode clicar no próprio valor cubic-bezier para uma cópia rápida.
Recursos
Canvas Bezier interativo
Um canvas SVG com grade de coordenadas, rótulos de eixos e uma linha de referência linear diagonal. Arraste os pontos de controle P1 e P2 para moldar a curva, com as coordenadas exibidas ao vivo enquanto você move.
29 predefinições de easing
As 5 easings padrão do CSS mais 24 funções de Penner em 8 famílias (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back), cada uma com uma miniatura da curva.
Comparação em corrida
Coloque sua curva personalizada ao lado da easing linear em uma corrida de bolinhas lado a lado, para ver na hora onde o movimento parece rápido, lento ou pausado.
Pré-visualização em várias propriedades
Veja uma única curva de easing controlar quatro propriedades CSS ao mesmo tempo: Posição, Escala, Rotação e Opacidade, para escolher a sensação certa para o seu caso.
Suporte a overshoot
Os valores de Y podem ir de -0,5 a 1,5, permitindo criar curvas que ultrapassam o alvo e voltam, para um movimento vivo e elástico, como o da família Back.
Campos numéricos
Quatro campos de entrada ficam em perfeita sincronia com o canvas, para você digitar valores exatos ou ler os números por trás de qualquer curva arrastada.
Duração ajustável
Teste sua easing em qualquer velocidade com um controle de duração de 200ms, para microinterações ágeis, até 3 segundos, para transições lentas e dramáticas.
CSS pronto para copiar
Tenha uma saída limpa tanto para transition-timing-function quanto para animation-timing-function, com cópia em um clique e cópia rápida no texto do valor.
Perguntas frequentes
O que é cubic-bezier no CSS?
cubic-bezier(x1, y1, x2, y2) é uma função do CSS que define uma curva de tempo personalizada para transitions e animations. Os quatro números controlam dois pontos que moldam como a animação acelera e desacelera ao longo da sua duração.
O que significam os quatro valores do cubic-bezier?
São dois pontos de controle: P1 (x1, y1) e P2 (x2, y2). Os valores de X representam o tempo, onde 0 é o início e 1 é o fim, e precisam ficar entre 0 e 1. Os valores de Y representam o progresso e podem sair do intervalo de 0 a 1 para gerar overshoot.
Como faço uma curva de easing com bounce ou overshoot?
Use um valor de Y abaixo de 0 ou acima de 1. Um valor abaixo de 0 faz o movimento ir brevemente para trás, e um valor acima de 1 faz ele ultrapassar o alvo antes de se assentar, o que cria a sensação de bounce ou de mola. A família de predefinições Back é construída sobre esse truque. Neste editor, Y pode variar de -0,5 a 1,5.
O que são as funções de easing de Penner?
As equações de easing de Robert Penner são um conjunto padrão de curvas de movimento muito usado em animação. Cada família (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back) vem em três variantes: In, para um início lento; Out, para um fim lento; e InOut, para ambos. Este editor oferece aproximações em cubic-bezier dessas curvas como predefinições.
Qual é a diferença entre cubic-bezier e ease-in-out?
ease-in-out é apenas uma palavra-chave nomeada para uma curva cubic-bezier específica (0.42, 0, 0.58, 1) que começa e termina devagar. cubic-bezier() é a função geral que permite definir qualquer curva que você quiser, incluindo a ease-in-out e inúmeras outras que as palavras-chave não conseguem expressar. Use Comparar para ver como uma curva personalizada difere da linear.
Como uso o código gerado?
Copie a saída e aplique o valor à sua transition ou animation, por exemplo transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); ou animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);. O editor gera tanto a propriedade timing-function da transition quanto a da animation, então você pode usar qualquer uma das duas.
Ainda não há comentários. Seja o primeiro a comentar!