Editor Cubic Bezier

Continuar na ferramenta

Mais páginas desta ferramenta

Cubic-bezier para transições de interface: como criar animações que parecem naturais

cubic-bezier spring overshoot CSS animação elástica

Spring e overshoot com cubic-bezier CSS: efeito mola sem JavaScript

Uma das capacidades menos conhecidas do `cubic-bezier()` no CSS é que os pontos de controle Y não são restritos ao intervalo [0,1]. Quando Y ultrapassa 1 ou vai abaixo de 0, a animação ultrapassa o ponto final e retorna, criando o efeito de mola (spring/bounce) sem nenhuma linha de JavaScript.

Como o overshoot funciona matematicamente

A curva bezier mapeia t (0→1) para ambos X (tempo) e Y (progresso). X deve ficar em [0,1] porque o tempo só avança. Y pode sair desse range, o browser anima além do valor final e depois volta. `cubic-bezier(0.34, 1.56, 0.64, 1)` é uma das fórmulas mais usadas para spring suave: Y1=1.56 cria o overshoot.
O grau de overshoot é controlado pelo quão alto Y1 ultrapassa 1. Y1=1.2 cria um toque sutil. Y1=2.0 cria um bounce exagerado. Para efeitos de bounce duplo (tipo jello), CSS puro com cubic-bezier não é suficiente, precisa de @keyframes com múltiplos frames intermediários.
O preset 'Quique' deste editor usa `cubic-bezier(0.22, 1.61, 0.36, 1)`, com Y1 chegando a 1.61, bem acima do 1.56 do spring padrão. Aplicado a uma transição de 450ms em `transform`, o resultado é `transition: transform 450ms cubic-bezier(0.22, 1.61, 0.36, 1);`. Quanto mais alto o Y1, mais cedo e mais longe o elemento ultrapassa o valor final antes de assentar, então durações muito curtas com Y1 alto tendem a parecer nervosas em vez de elásticas, vale aumentar a duração junto com a intensidade do overshoot.

Valores de spring por intensidade

Spring sutil (Y1=1.2)

Entrada: Escala ou translate de elemento entrando
Saída esperada: transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1);

Overshoot suave. Funciona bem para ícones, badges e toasts.

Spring médio (Y1=1.56)

Entrada: Modal ou drawer entrando
Saída esperada: transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

Fórmula popular para drawers e menus. Personalidade sem exagero.

Bounce intenso (Y1=1.61)

Entrada: Ícone de confirmação ou elemento de celebração
Saída esperada: transition: transform 450ms cubic-bezier(0.22, 1.61, 0.36, 1);

Overshoot mais pronunciado que o spring médio. Reserve para poucos elementos de destaque, uso excessivo cansa visualmente.

FAQ da ferramenta completa

O que é uma função cubic-bezier?

É uma função matemática que define como uma animação CSS acelera e desacelera ao longo do tempo. Os quatro parâmetros (x1, y1, x2, y2) descrevem os dois pontos de controle de uma curva cúbica de Bézier, enquanto o início (0,0) e o fim (1,1) são fixos. O formato da curva entre esses pontos é o que dá personalidade ao movimento.

Qual é a diferença entre ease, ease-in, ease-out e ease-in-out?

Por que os pontos de controle Y podem ir além de 0 e 1?

Qual o range permitido para X?

Como aplicar cubic-bezier a uma propriedade específica?

Cubic-bezier funciona com CSS animations (@keyframes)?

Qual preset é mais adequado para animações de interface?

Cubic-bezier tem suporte em todos os navegadores?

Perguntas frequentes

Quais propriedades funcionam bem com spring overshoot?

Transform (scale, translate) e opacity funcionam melhor porque são composited pelo GPU. Evite spring em propriedades de layout como width, height, padding, geram reflow e o efeito fica irregular.

CSS spring é igual a framer-motion spring?

Não. Framer-motion usa física de mola real (massa, rigidez, amortecimento) calculada frame a frame. CSS cubic-bezier é uma aproximação conveniente. Para efeitos sofisticados com múltiplos bounces ou que dependem de velocidade, JavaScript é necessário.

Overshoot funciona bem em looping ou só em transições únicas?

Funciona melhor em transições únicas disparadas por uma ação, como abrir um modal ou confirmar uma tarefa. Em `@keyframes` que fazem loop, o overshoot repetido em cada ciclo tende a virar ruído visual, para loops contínuos, curvas sem overshoot como `ease-in-out` ou `linear` comunicam ritmo com mais clareza.

Próximos passos

Continuar na ferramenta

Abrir ferramenta completa

cubic-bezier spring overshoot CSS animação elástica

Spring e overshoot com cubic-bezier CSS: efeito mola sem JavaScript

Como o overshoot funciona matematicamente

A curva bezier mapeia t (0→1) para ambos X (tempo) e Y (progresso). X deve ficar em [0,1] porque o tempo só avança. Y pode sair desse range, o browser anima além do valor final e depois volta. `cubic-bezier(0.34, 1.56, 0.64, 1)` é uma das fórmulas mais usadas para spring suave: Y1=1.56 cria o overshoot.

O grau de overshoot é controlado pelo quão alto Y1 ultrapassa 1. Y1=1.2 cria um toque sutil. Y1=2.0 cria um bounce exagerado. Para efeitos de bounce duplo (tipo jello), CSS puro com cubic-bezier não é suficiente, precisa de @keyframes com múltiplos frames intermediários.

O preset 'Quique' deste editor usa `cubic-bezier(0.22, 1.61, 0.36, 1)`, com Y1 chegando a 1.61, bem acima do 1.56 do spring padrão. Aplicado a uma transição de 450ms em `transform`, o resultado é `transition: transform 450ms cubic-bezier(0.22, 1.61, 0.36, 1);`. Quanto mais alto o Y1, mais cedo e mais longe o elemento ultrapassa o valor final antes de assentar, então durações muito curtas com Y1 alto tendem a parecer nervosas em vez de elásticas, vale aumentar a duração junto com a intensidade do overshoot.

Valores de spring por intensidade

Spring sutil (Y1=1.2)

Entrada: Escala ou translate de elemento entrando
Saída esperada: transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1);

Overshoot suave. Funciona bem para ícones, badges e toasts.

Spring médio (Y1=1.56)

Entrada: Modal ou drawer entrando
Saída esperada: transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

Fórmula popular para drawers e menus. Personalidade sem exagero.

Bounce intenso (Y1=1.61)

Entrada: Ícone de confirmação ou elemento de celebração
Saída esperada: transition: transform 450ms cubic-bezier(0.22, 1.61, 0.36, 1);

Overshoot mais pronunciado que o spring médio. Reserve para poucos elementos de destaque, uso excessivo cansa visualmente.

FAQ da ferramenta completa

O que é uma função cubic-bezier?

Qual é a diferença entre ease, ease-in, ease-out e ease-in-out?

Por que os pontos de controle Y podem ir além de 0 e 1?

Qual o range permitido para X?

Como aplicar cubic-bezier a uma propriedade específica?

Cubic-bezier funciona com CSS animations (@keyframes)?

Qual preset é mais adequado para animações de interface?

Cubic-bezier tem suporte em todos os navegadores?

Perguntas frequentes

Quais propriedades funcionam bem com spring overshoot?

Transform (scale, translate) e opacity funcionam melhor porque são composited pelo GPU. Evite spring em propriedades de layout como width, height, padding, geram reflow e o efeito fica irregular.