cubic-bezier(0.25, 0.10, 0.25, 1.00)
●
Generated CSS
Cada transição e animação CSS tem uma curva de easing — uma função matemática que controla como o valor animado muda ao longo do tempo. O eixo horizontal representa o tempo (0 = início, 1 = fim da duração) e o eixo vertical representa o progresso do valor animado. Uma linha diagonal reta significa movimento linear — velocidade constante ao longo do tempo.
A função cubic-bezier() é o mecanismo CSS para definir qualquer curva de easing personalizada. Ela descreve uma curva de Bezier cúbica usando dois pontos de controle — P1 e P2 — que puxam a curva em direção a eles como ímãs. P0 está sempre fixo em (0,0) e P3 em (1,1).
Os valores X de P1 e P2 devem ficar entre 0 e 1 — representam pontos no tempo. Os valores Y, no entanto, podem ir a qualquer lugar. Um valor Y acima de 1 significa que a propriedade animada temporariamente excede seu valor final antes de se assentar — este é o overshoot que produz efeitos de mola e quique. Um valor Y abaixo de 0 significa undershoot (antecipação).
Uma inclinação acentuada no início significa movimento inicial rápido; uma inclinação suave significa início lento. Uma curva que sobe acima da linha Y=1 significa que a animação faz overshoot. Uma curva em S — suave em ambas as extremidades com um meio acentuado — é a família ease-in-out.
CSS fornece cinco aliases de palavras-chave. ease é o padrão do navegador. ease-out tem o início mais rápido e o final mais lento, sendo a melhor escolha para elementos chegando de fora da tela. ease-in é o oposto — início lento, final rápido — certo para saídas. ease-in-out é simétrico. linear não tem nenhum easing.
A comunidade de design convergiu em várias curvas personalizadas nomeadas. Material Design usa cubic-bezier(0.4, 0, 0.2, 1) para transições entre estados, cubic-bezier(0, 0, 0.2, 1) para entradas e cubic-bezier(0.4, 0, 1, 1) para saídas. A curva "expo out" cubic-bezier(0.16, 1, 0.3, 1) é muito popular para animações de gaveta lateral.
A função steps() não é uma curva — produz saltos discretos em vez de interpolação contínua. É essencial para animações de sprite sheets, efeitos de máquina de escrever e efeitos de piscar de cursor.
CSS recentemente ganhou uma função de temporização linear() que permite definir uma curva de easing linear por partes especificando uma série de valores de progresso em porcentagens de tempo específicas. Isso desbloqueia curvas que mudam de direção mais de uma vez.
A regra de maior impacto é combinar o caráter da curva com a física do que o elemento representa. Coisas entrando na tela devem usar variantes ease-out. Coisas saindo devem usar variantes ease-in. Coisas se transformando entre dois estados de peso igual funcionam melhor com ease-in-out.
A função cubic-bezier() funciona de forma idêntica em transition-timing-function e animation-timing-function. Em animações de keyframe, você pode especificar uma função de temporização diferente por keyframe.
O Chrome e o Edge DevTools incluem um editor de cubic-bezier integrado. Ao inspecionar qualquer elemento com uma propriedade transition ou animation-timing-function, você verá um pequeno ícone de curva ao lado do valor da função de temporização.
Sim — apenas os valores Y podem exceder o intervalo 0 a 1. Os valores X devem ficar entre 0 e 1 porque representam tempo. Y acima de 1 = overshoot (mola); Y abaixo de 0 = undershoot (antecipação).
ease tem início rápido e desaceleração gradual — parece natural para a maioria das interações de UI. ease-in-out é perfeitamente simétrico (igualmente lento em ambas as extremidades), melhor para transições de painel deliberadas.
As curvas cubic-bezier CSS são curvas matemáticas fixas — não podem responder à velocidade atual do elemento quando interrompidas no meio de uma animação. Bibliotecas de física de mola JavaScript como Framer Motion ou GSAP podem responder às interrupções mantendo a velocidade atual.
Use steps() quando precisar de saltos discretos — avanço de quadros de sprite sheet, revelações de caractere de máquina de escrever, piscadas de cursor. Use cubic-bezier() para qualquer animação onde você queira interpolação contínua suave.
Sim — o gerador nesta página mostra uma pré-visualização em tela ao vivo que se atualiza enquanto você arrasta os pontos de controle. Você também pode abrir o Chrome DevTools e clicar no ícone de curva ao lado do valor da função de temporização.