ZenovayTools

Gerador de CSS Easing / cubic-bezier

Crie e visualize visualmente funções de easing CSS cubic-bezier. Arraste pontos de controle na curva interativa, escolha entre presets e copie a função de timing CSS.

Presets

Drag the control points

x10.42
y10.00
x20.58
y21.00

CSS Output

transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

animation-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

Como Usar Gerador de CSS Easing / cubic-bezier

  1. 1Escolha um preset de easing ou arraste os pontos de controle para criar uma curva personalizada.
  2. 2Visualize a animação em tempo real com uma bola em movimento.
  3. 3Copie o valor CSS cubic-bezier() para usar em suas transições.
ZenovayAnalytics

Transforme seu tráfego em clientes.

  • Acompanhamento de visitantes em tempo real
  • Privacidade em primeiro lugar, sem banner de cookies
  • Configurado em dois minutos
Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.
Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.
Gerador de CSS Border Radius
Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.
Área de Testes CSS Flexbox
Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.

Perguntas Frequentes

O que é cubic-bezier() no CSS?▾
cubic-bezier(x1, y1, x2, y2) define uma curva de Bezier cúbica usada como função de temporização CSS para transitions e animations. A curva é definida por 4 pontos: P0=(0,0) início, P1=(x1,y1) ponto de controle 1, P2=(x2,y2) ponto de controle 2, P3=(1,1) fim. x1, x2 devem estar em [0,1] (eixo do tempo). y1, y2 podem estar fora de [0,1] para efeitos de ultrapassagem. Palavras-chave CSS mapeiam para curvas específicas: ease = (0.25, 0.1, 0.25, 1.0), ease-in = (0.42, 0, 1.0, 1.0), ease-out = (0, 0, 0.58, 1.0), ease-in-out = (0.42, 0, 0.58, 1.0), linear = (0, 0, 1, 1).
Qual é a diferença entre ease-in, ease-out e ease-in-out?▾
ease-in: começa devagar, termina rápido — como um objeto saindo do repouso (gravidade). ease-out: começa rápido, termina devagar — como uma bola pousando. ease-in-out: início lento, meio rápido, fim lento — curva S simétrica. linear: velocidade constante. ease: o padrão CSS — ligeiramente ease-in, depois ease-out. Dicas: use ease-out para elementos que entram na tela (parece natural). Use ease-in para elementos que saem (acelerando para fora da tela). Use ease-in-out para transições de estado. Nunca use linear na UI — parece mecânico e robótico.
O que são animações spring e como diferem de bezier?▾
Cubic-bezier: duração fixa, temporização independente de física. A animação sempre leva exatamente a duração especificada. Spring: baseado em física com massa, rigidez, amortecimento e velocidade. A duração não é fixa — roda até o sistema se estabilizar. Springs podem ultrapassar e oscilar naturalmente. CSS não suporta springs nativamente — eles requerem JavaScript (Framer Motion, React Spring, GSAP). Para CSS puro, cubic-bezier com valores y fora de [0,1] aproxima a ultrapassagem de spring. Exemplo: cubic-bezier(0.34, 1.56, 0.64, 1) cria uma leve ultrapassagem semelhante a spring.
Como escolho o easing certo para minha animação?▾
Princípios: objetos no mundo real não começam ou param instantaneamente. Siga as interações materiais: elementos que entram na tela devem ter ease out (desacelerar ao chegar). Elementos que saem devem ter ease in (acelerar ao partir). Mudanças de estado (expandir, colapsar) usam ease-in-out. Micro-interações (pressionar botão) usam ease-out para a resposta, ease-in para o reset. Material Design usa: curva padrão (0.4, 0, 0.2, 1), desaceleração (0, 0, 0.2, 1), aceleração (0.4, 0, 1, 1). iOS usa animações spring com leve ultrapassagem.
O que é CSS linear() para animações complexas?▾
CSS linear() (2023) permite interpolação linear de múltiplos pontos — essencialmente uma função linear por partes que aproxima curvas complexas. Sintaxe: animation-timing-function: linear(0, 0.25, 1); Um easing de bounce: linear(0, 0.063, 0.25 18.2%, 1 36.4%, 0.813 54.5%, 1 72.7%, 0.941 81.8%, 1). É assim que você obtém animações de spring, bounce e física complexa sem JavaScript. A função JavaScript generateLinearEasing() da API de animações web pode calcular esses valores a partir de qualquer simulação de física. Suporte de navegadores: Chrome 113+, Firefox 112+, Safari 17.2+.