Gerador de Cubic-Bezier CSS

O que é esta ferramenta?

cubic-bezier() é uma função de tempo CSS que controla como um valor animado ou em transição acelera e desacelera ao longo do tempo, em vez de se mover a uma taxa constante. É definida por dois pontos de controle — (x1, y1) e (x2, y2) — que curvam uma linha entre um ponto de partida fixo (0,0) e um ponto final fixo (1,1). Os valores de x devem ficar entre 0 e 1, mas os de y podem sair desse intervalo para criar efeitos de exagero ou quique.

Ajustar manualmente quatro números decimais até obter uma sensação que não seja nem abrupta nem mole exige muita tentativa e erro. Esta ferramenta substitui esse tateio por manipulação direta: mova um controle deslizante, veja a curva se dobrar e a bola de pré-visualização se mover de acordo, e copie o CSS quando o movimento estiver do jeito certo.

Fonte: CSS Easing Functions Level 1, W3C — a especificação que define cubic-bezier() e as cinco palavras-chave nomeadas em que se baseiam os predefinidos desta ferramenta.

Por que usar?

• Um gráfico SVG ao vivo mostra exatamente como a sua curva se dobra entre os pontos fixos de início e fim, com os dois pontos de controle e suas alças desenhados com clareza.
• O botão Reproduzir anima um elemento de pré-visualização ao longo de uma pista usando a sua curva exata, para que você sinta o movimento, não apenas veja um gráfico estático.
• Predefinições de um clique para as cinco funções de aceleração nomeadas padrão — ease, ease-in, ease-out, ease-in-out e linear — conforme documentado na especificação CSS Easing Functions.
• Os valores de y podem ficar abaixo de 0 ou acima de 1, permitindo criar efeitos de exagero/quique que as palavras-chave nomeadas não conseguem produzir.
• Gera CSS de transition-timing-function pronto para colar — o mesmo valor também funciona em animation-timing-function.
• Roda inteiramente no seu navegador — nada do que você configura é enviado para lugar nenhum. Grátis, sem cadastro.

Como usar

1. Arraste os controles x1/y1 para definir o primeiro ponto de controle, que molda o início da animação.
2. Arraste os controles x2/y2 para definir o segundo ponto de controle, que molda o fim da animação.
3. Observe a curva preta no gráfico — se ela se projetar acima da diagonal no início, o movimento começa rápido; se ficar abaixo, começa devagar.
4. Clique em Reproduzir para ver um elemento de pré-visualização se mover pela pista usando a sua curva como transition-timing-function.
5. Experimente uma predefinição (ease, ease-in, ease-out, ease-in-out, linear) como ponto de partida e depois ajuste os controles a partir daí.
6. Copie o CSS gerado e cole em uma regra de transição ou animação.

Exemplo

Entrada

x1: 0,25, y1: 0,1, x2: 0,25, y2: 1

Resultado

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Esses são os pontos de controle exatos da palavra-chave padrão ease do CSS — início rápido, seguido de uma desaceleração gradual até o fim.

Por que os valores de y podem ultrapassar 0–1

Diferente do eixo x, que representa o tempo e precisa ir de 0 a 1, o eixo y representa o progresso do valor animado e não tem esse limite. Definir y1 abaixo de 0 ou y2 acima de 1 faz a curva afundar antes do valor inicial ou disparar além do valor final antes de se estabilizar — a base dos efeitos de exagero e antecipação usados em pressionar botões, aparecer modais e micro-interações lúdicas. Nenhuma das cinco palavras-chave nomeadas (ease, ease-in, ease-out, ease-in-out, linear) consegue produzir isso; para isso é preciso um cubic-bezier() personalizado.

transition-timing-function vs. animation-timing-function

O valor cubic-bezier() que esta ferramenta gera funciona de forma idêntica nas duas propriedades. Use transition-timing-function quando o movimento é disparado por uma mudança de estado (como um hover ou troca de classe), e animation-timing-function dentro de uma regra de animação orientada por @keyframes quando você precisa da mesma sensação aplicada automaticamente ou em loop.

Padrões de aceleração comuns

• Resposta ágil de interface (botões, interruptores): mantenha os pontos de controle perto da diagonal com uma leve tendência ease-out, por exemplo cubic-bezier(0.4, 0, 0.2, 1).
• Curva padrão do Material Design: cubic-bezier(0.4, 0, 0.2, 1) — início rápido, final suave, muito usada em transições de painéis e cartões.
• Quique/exagero: leve y2 acima de 1, por exemplo cubic-bezier(0.34, 1.56, 0.64, 1), para uma sensação lúdica de entrada.
• Antecipação antes do movimento: leve y1 abaixo de 0 para que o elemento recue levemente antes de avançar.
• Ease-in-out suave para animações em loop: mantenha a curva quase simétrica em torno do centro.

Combinando com outras ferramentas CSS

Uma curva de aceleração raramente é usada sozinha — geralmente é aplicada a um elemento que também precisa de sombras, cantos arredondados ou gradientes. Gere o estilo visual com as outras ferramentas CSS abaixo e depois adicione a função de tempo desta ferramenta à mesma regra ou declaração de transição/animação.

→ Gerador de Box Shadow · Gerador de Border Radius

Perguntas frequentes