O Gerador de Cubic Bezier CSS é uma ferramenta visual concebida para criar curvas de transição personalizadas para animações e transições na Web. Ao arrastar dois pontos de controlo, pode moldar a curva de aceleração e desaceleração, comparando instantaneamente o movimento resultante com uma velocidade constante. A ferramenta gera o código correspondente para a função cubic-bezier(), pronto a ser aplicado nas suas folhas de estilo.
O papel das curvas de transição no CSS
As transições e animações em CSS utilizam funções de temporização para ditar como a velocidade de uma propriedade animada varia ao longo do tempo. Em vez de um movimento linear e mecânico, as curvas de transição permitem simular acelerações físicas mais naturais.
A propriedade transition-timing-function e a propriedade animation-timing-function aceitam a função cubic-bezier(x1, y1, x2, y2) para definir este comportamento. Palavras-chave comuns do CSS, como ease, ease-in, ease-out e ease-in-out, são simplesmente atalhos para valores predefinidos desta mesma função matemática. Ao compreender e manipular os pontos de controlo, consegue criar efeitos personalizados que vão além destas opções padrão.
Como funcionam os pontos de controlo (x1, y1, x2, y2)
A curva de transição é traçada num plano bidimensional que vai do canto inferior esquerdo (o início da animação, correspondente a 0% do tempo e do progresso) ao canto superior direito (o fim da animação, correspondente a 100% do tempo e do progresso). O tempo progride horizontalmente da esquerda para a direita (eixo X), enquanto o progresso da animação sobe verticalmente (eixo Y).
A forma desta curva é ditada por dois pontos de controlo intermédios, representados por duas alças na interface:
- Primeiro ponto de controlo (x1, y1): Controla a curvatura inicial perto do ponto de partida.
- Segundo ponto de controlo (x2, y2): Controla a curvatura final perto do ponto de chegada.
Os valores de X para ambos os pontos representam frações do tempo total da animação e estão estritamente limitados ao intervalo entre 0 e 1. Os valores de Y representam o progresso da propriedade animada e podem estender-se além do intervalo padrão, situando-se entre -0.70 e 1.70. Esta flexibilidade no eixo Y permite que a animação recue antes de começar ou ultrapasse o valor final antes de estabilizar.
Regras de validação e comportamento da interface
Para garantir que o código gerado é sempre válido para utilização em CSS, a ferramenta aplica regras automáticas de correção de dados durante a edição dos campos numéricos:
- Limites estritos de entrada: Os campos para o eixo X aceitam apenas valores de 0 a 1. Os campos para o eixo Y aceitam valores de -0.70 a 1.70.
- Correção ao perder o foco: Se introduzir um valor fora dos limites permitidos, como
9para o X do primeiro ponto de controlo, e clicar fora do campo, o sistema corrige automaticamente o valor para o limite máximo de1. - Restauro de valores limpos: Se apagar completamente o conteúdo de um campo numérico e retirar o foco do mesmo, o campo restaura automaticamente o último valor válido que continha.
- Ajustes finos com o teclado: Quando uma alça de controlo está focada, pode utilizar a tecla de seta Esquerda para decrementar o valor de forma precisa, reduzindo-o, por exemplo, para
0.99. - Campos incompletos: Se deixar um campo vazio ou com caracteres não numéricos a meio da edição, a ferramenta aguarda até que introduza um valor completo e válido antes de atualizar a curva.
Efeitos de recuo e avanço (Overshoot)
Ao arrastar os valores de Y para além dos limites de 0 e 1, consegue criar dinâmicas de movimento avançadas:
- Antecipação (Pull-back): Definir um valor de Y negativo (até -0.70) faz com que o elemento se mova na direção oposta à da animação antes de arrancar com velocidade para a frente.
- Ultrapassagem (Overshoot): Definir um valor de Y superior a 1 (até 1.70) faz com que o elemento ultrapasse temporariamente o seu ponto final de destino, regressando depois suavemente para se fixar na posição correta.
A predefinição "Avançar e Sair (Back Out)", por exemplo, configura a função para cubic-bezier(0.34, 1.56, 0.64, 1), aplicando um efeito nítido de ultrapassagem no final do movimento.
Limitações físicas da curva cubic-bezier
Embora a função cubic-bezier() seja extremamente versátil para acelerações e desacelerações, ela possui limitações estruturais. Uma única curva de Bezier cúbica só se pode mover numa direção geral e estabilizar; ela não consegue descrever movimentos que invertam a sua direção múltiplas vezes consecutivas.
Isto significa que efeitos complexos como ressaltos sucessivos (efeito de bola a saltar ou "bounce") ou oscilações elásticas repetidas não podem ser criados com uma única função cubic-bezier(). Para esses cenários, é necessário recorrer a múltiplos @keyframes no CSS ou utilizar a função de temporização linear() com múltiplos pontos de ancoragem.
Privacidade e processamento local
O desenho da curva, a simulação do movimento e a geração do código ocorrem inteiramente no seu dispositivo. O processamento é feito diretamente no seu navegador de internet, garantindo que nenhum dado ou parâmetro definido na ferramenta é carregado para os servidores do 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.