Gerador de Cubic Bezier CSS
Arraste as duas alças para criar uma curva de transição, veja o movimento em tempo real comparado com uma velocidade constante e copie o valor de cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)A curva é desenhada diretamente no seu navegador. Nada do que definir aqui é carregado para o BroBroGo.
Perguntas Frequentes
O que significam as duas alças e os quatro números?
A curva vai do canto inferior esquerdo (o início) ao canto superior direito (o fim), com o tempo a decorrer da esquerda para a direita e o progresso a subir. As duas alças são os pontos de controlo que a curvam — cada uma tem um X e um Y, formando a expressão cubic-bezier(x1, y1, x2, y2). O X fica sempre entre 0 e 1, enquanto o Y pode ultrapassar o topo ou a base para fazer o movimento avançar além do limite ou recuar antes de se estabilizar.
Como utilizo o valor no meu CSS?
Copie o cubic-bezier() e cole-o onde quer que vá uma função de transição — transition-timing-function, animation-timing-function ou na propriedade simplificada (shorthand), ex: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). As palavras-chave ease, ease-in, ease-out e ease-in-out são apenas curvas cubic-bezier fixas, pelo que escolher uma dessas predefinições mostrará o valor exato por trás da palavra-chave.
É possível criar um efeito elástico ou de ressalto?
Não de forma isolada. Uma única curva cubic-bezier pode criar efeitos de recuo e avanço (overshoot) — as predefinições "back" puxam uma das alças para fora do limite para fazer exatamente isso —, mas só se pode mover numa direção e depois estabilizar. Efeitos de ressalto (bounce) ou elásticos mudam de direção várias vezes, o que uma única curva cubic-bezier não consegue expressar; para isso, são necessários keyframes CSS ou a função linear() com múltiplos pontos.