Funcionamento das curvas de transição no CSS
As transições e animações no CSS utilizam funções de temporização para definir como a velocidade de um elemento varia ao longo do tempo. Por padrão, o navegador oferece palavras-chave como ease, ease-in, ease-out e ease-in-out. No entanto, para criar movimentos personalizados, utiliza-se a função cubic-bezier(x1, y1, x2, y2).
Esta ferramenta permite desenhar visualmente essa curva de transição arrastando duas alças de controle. À medida que você ajusta a curva, um ponto se move ao longo dela na área de visualização, demonstrando o efeito de aceleração e desaceleração lado a lado com um ponto que se desloca em velocidade constante. O gerador calcula os parâmetros exatos em tempo real para que você possa copiar o código pronto para o seu arquivo CSS.
Estrutura matemática e pontos de controle
A curva de transição é uma curva de Bezier cúbica que conecta o ponto inicial (canto inferior esquerdo, correspondente ao início da animação) ao ponto final (canto superior direito, correspondente ao término da animação).
O progresso do tempo ocorre no eixo horizontal (da esquerda para a direita), enquanto o progresso da animação ocorre no eixo vertical (de baixo para cima). A forma da curva é determinada por dois pontos de controle intermediários, definidos pelas coordenadas (x1, y1) e (x2, y2):
- Primeiro ponto de controle (x1, y1): Controla a aceleração inicial da curva.
- Segundo ponto de controle (x2, y2): Controla a desaceleração final da curva.
Os valores de X (x1 e x2) representam frações de tempo e devem obrigatoriamente permanecer no intervalo entre 0 e 1. Os valores de Y (y1 e y2) representam o progresso do elemento e podem ultrapassar os limites de 0 e 1 (variando de -0.70 a 1.70 no gerador) para criar efeitos físicos de recuo ou avanço além do ponto final.
Regras de entrada e comportamento da interface
O gerador possui regras estritas para garantir que os valores inseridos gerem um código CSS válido:
- Limites dos campos numéricos: Os campos para o eixo X aceitam apenas valores de 0 a 1. Os campos para o eixo Y aceitam valores entre -0.70 e 1.70.
- Correção automática: Se você digitar um valor fora do limite permitido, como
9para o X do primeiro ponto de controle, e clicar fora do campo (perda de foco), o sistema ajustará automaticamente o valor para o limite máximo de1. - Restauração de valores: Se você apagar completamente o conteúdo de um campo numérico e perder o foco do elemento, o gerador restaurará o último valor válido utilizado.
- Ajuste fino pelo teclado: Quando uma alça de controle estiver selecionada (focada), você pode pressionar a tecla de seta para a esquerda para reduzir o valor de forma incremental, por exemplo, ajustando-o para
0.99. - Campos incompletos: Entradas vazias ou caracteres não numéricos temporários não quebram a aplicação; o sistema aguarda até que um valor numérico completo e válido seja inserido.
Efeitos de avanço (overshoot) e recuo (pull-back)
Ao estender os valores de Y para além do intervalo padrão de 0 a 1, você consegue criar comportamentos físicos realistas.
Se o valor de Y1 for menor que 0, a animação começará movendo-se na direção oposta antes de avançar para o destino (efeito de recuo ou antecipação). Se o valor de Y2 for maior que 1, o elemento ultrapassará temporariamente o seu ponto final de destino para depois retornar e se estabilizar na posição correta (efeito de avanço ou overshoot).
O preset "Avançar e Sair (Back Out)", por exemplo, configura a função para cubic-bezier(0.34, 1.56, 0.64, 1). O valor de Y1 igual a 1.56 faz com que o elemento ultrapasse o limite final da transição de forma suave antes de concluir o movimento.
Aplicação prática no código CSS
O valor gerado pela ferramenta deve ser aplicado diretamente nas propriedades de temporização do CSS. Ele é compatível com as propriedades transition-timing-function e animation-timing-function, bem como com as propriedades simplificadas (shorthands) transition e animation.
Exemplo de uso em transições:
.elemento {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
Exemplo de uso em animações declaradas com @keyframes:
.elemento-animado {
animation: flutuar 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
Privacidade e processamento local
A curva de transição é desenhada diretamente no seu navegador. Todo o processamento matemático, renderização visual e geração do código ocorrem localmente no dispositivo do usuário. Nada do que você define aqui é enviado 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 correndo da esquerda para a direita e o progresso subindo. As duas alças são os pontos de controle que a curvam — cada uma tem um X e um Y, formando a expressão cubic-bezier(x1, y1, x2, y2). O X sempre fica 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 uso 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, então escolher um desses presets mostrará o valor exato por trás da palavra-chave.
É possível criar um efeito elástico ou de rebote?
Não sozinho. Uma única curva cubic-bezier pode criar efeitos de recuo e avanço (overshoot) — os presets "back" puxam uma das alças para fora do limite para fazer exatamente isso —, mas ela só pode se mover em uma direção e depois estabilizar. Efeitos de rebote (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.