O que é um easing cubic-bezier?

É uma função de temporização para transitions e animações CSS definida por dois pontos de controle, escrita como cubic-bezier(x1, y1, x2, y2), que molda como uma propriedade muda ao longo do tempo.

O valor y pode ser maior que 1 ou menor que 0?

Sim. Valores y fora de 0–1 fazem a animação ultrapassar ou recuar, criando efeitos semelhantes a quique. Apenas os valores x são restritos a 0–1.

Como isso se relaciona com ease e ease-in-out?

Essas palavras-chave são curvas cubic-bezier específicas. Use as predefinições para começar por elas e arraste os controles para personalizar.

Onde colo o resultado?

Use o valor cubic-bezier() como função de temporização em uma transition ou animation, por exemplo transition: all 0.4s cubic-bezier(...).

Algo é enviado a um servidor?

Não. O editor funciona inteiramente no seu navegador e nada é enviado.

Gerador Cubic Bezier

Visualizar

cubic-bezier(0.25, 0.1, 0.25, 1)

transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

Ferramentas externas relacionadas

Alguns links são links de afiliados.

AmazonO maior marketplace online do mundo para compras, eletrônicos, livros, software e mais. Envio rápido, devoluções fáceis e um vasto catálogo de produtos o tornam o favorito para compras do dia a dia. A assinatura Prime adiciona streaming, frete grátis e ofertas exclusivas.UdemyUm marketplace de aprendizado online com mais de 250.000 cursos em programação, design, negócios e mais. Os cursos são ministrados por especialistas do setor e disponíveis no seu próprio ritmo. Vendas frequentes o tornam uma das maneiras mais acessíveis de aprender novas habilidades.

Ferramentas relacionadas

Conversor de CoresConverta qualquer cor entre HEX, RGB, HSL, HSV e RGBA ao mesmo tempo. Edite um valor, copie com um clique, com alfa e contraste WCAG.Gerador de Paleta de CoresGere paletas de cores harmônicas a partir de um HEX base com esquemas complementar, análogo, triádico e mais. Trave cores, regenere o resto e exporte para CSS, Tailwind ou JSON.Gerador de GradienteCrie gradientes CSS lineares, radiais e cônicos com múltiplas paradas de cor. Ajuste ângulo, forma e centro, e copie o CSS de background ou o valor do Tailwind com um clique.Extrator de Cores de ImagemExtraia a paleta de cores dominantes de qualquer imagem no seu navegador, sem enviar nada. Obtenha HEX, RGB e porcentagem (%) de cada cor, escolha quantas cores e exporte como CSS/JSON.

Projete uma curva de easing CSS personalizada arrastando dois controles, acompanhe o movimento em uma visualização ao vivo e copie o valor cubic-bezier() e o código transition prontos para usar. Perfeito para ajustar com precisão a sensação das animações. Tudo funciona no seu navegador.

Como usar

Arraste os dois controles coloridos ou digite valores exatos para x1, y1, x2 e y2.
Pressione repetir para visualizar o movimento produzido pela curva.
Copie o valor cubic-bezier() ou a linha transition completa para o seu CSS.

Como funciona

Uma curva de easing CSS é uma curva Bezier cúbica com extremidades fixas em (0,0) e (1,1). Dois pontos de controle moldam a curva entre elas, e suas coordenadas são os quatro números em cubic-bezier(x1, y1, x2, y2). Os valores x devem ficar entre 0 e 1 (o tempo sempre avança), mas os valores y podem ficar abaixo de 0 ou acima de 1 para criar efeitos de antecipação ou ultrapassagem.

Recursos

Arraste para dar forma

Mova os controles diretamente na curva para encontrar o easing que deseja.

Valores exatos

Digite coordenadas precisas quando precisar corresponder a uma especificação ou sistema de design.

Visualização ao vivo

Repita o movimento para julgar o easing antes de usá-lo.

Predefinições padrão

Comece a partir de ease, linear, ease-in, ease-out ou ease-in-out e ajuste a partir daí.

Código pronto para copiar

Copie o valor cubic-bezier() ou uma declaração transition completa.

Quando usar

Movimento de interface

Ajuste como botões, modais e painéis se movem para que as transições pareçam naturais.

Microinterações

Adicione uma leve ultrapassagem ou antecipação a pequenas interações para dar personalidade.

Easing consistente

Defina uma curva personalizada e reutilize em todo o projeto para uma sensação unificada.

Aprendizado

Veja como os pontos de controle alteram o movimento para entender as funções de easing.

Observações

Os valores x são limitados a 0–1 porque o tempo não pode retroceder.
Os valores y podem exceder 0–1 para criar efeitos de quique ou ultrapassagem.
As predefinições integradas aproximam as palavras-chave CSS padrão.
Tudo funciona no seu dispositivo; nada é enviado.

Perguntas frequentes

O que é um easing cubic-bezier?: É uma função de temporização para transitions e animações CSS definida por dois pontos de controle, escrita como cubic-bezier(x1, y1, x2, y2), que molda como uma propriedade muda ao longo do tempo.
O valor y pode ser maior que 1 ou menor que 0?: Sim. Valores y fora de 0–1 fazem a animação ultrapassar ou recuar, criando efeitos semelhantes a quique. Apenas os valores x são restritos a 0–1.
Como isso se relaciona com ease e ease-in-out?: Essas palavras-chave são curvas cubic-bezier específicas. Use as predefinições para começar por elas e arraste os controles para personalizar.
Onde colo o resultado?: Use o valor cubic-bezier() como função de temporização em uma transition ou animation, por exemplo transition: all 0.4s cubic-bezier(...).
Algo é enviado a um servidor?: Não. O editor funciona inteiramente no seu navegador e nada é enviado.