Pular para o conteúdo
Toolars
Explorar

Gerador de cubic-bezier CSS

CSS Cubic Bezier Generator

Oito curvas prontas, quatro coordenadas Bézier e prévia animada do ritmo.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

Caminho da tarefa / da entrada ao resultado

Como criar uma curva de easing cubic-bezier

  1. 01

    Posicione o primeiro ponto de controle

    Defina Controle X1 entre 0 e 1 e Controle Y1 entre −1 e 2. O gráfico da curva se redesenha ao vivo, com uma linha-guia do ponto inicial até a sua alça. 8 Curva predefinida · [x1, y1, x2, y2] · cubic-bezier()

  2. 02

    Posicione o segundo ponto de controle

    Defina Controle X2 (0–1) e Controle Y2 (−1 a 2). Puxar um valor Y além de 1 é o que cria o overshoot que faz um easing parecer elástico; puxar Y1 abaixo de 0 adiciona um momento de antecipação antes do movimento começar.

  3. 03

    Defina a duração

    Escolha uma Duração de 0,1 a 4 segundos. O marcador na trilha de movimento percorre o loop usando a sua curva exata, então a cadência que você assiste é a cadência que você publica.

  4. 04

    Ou comece de uma curva conhecida

    A curva padrão — 0.25, 0.1, 0.25, 1 — é exatamente a palavra-chave ease padrão e um ponto de partida neutro. Pressione Carregar exemplo para uma curva elástica com overshoot (0.34, 1.56, 0.64, 1) que demonstra o que um valor Y além de 1 faz.

  5. 05

    Copie o CSS de timing

    Copiar CSS ou Baixar .css salva toolars-cubic-bezier.css. A regra .motion define transition-duration e as duas propriedades timing-function. Ela não define animation-duration; acrescente essa duração para animações por keyframes.

  6. 06

    Leia o gráfico antes de publicar

    O gráfico plota o progresso ao longo do tempo entre os pontos fixos de início e fim: trechos planos são lentos, trechos íngremes são rápidos. Uma curva que desce abaixo do início ou sobe além do fim não é erro — é antecipação e overshoot, desenhados com honestidade. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de cubic-bezier CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de cubic-bezier CSS realmente faz

Um modal que deve abrir com rapidez mas assentar suavemente, um hover de cartão que precisa de um pequeno overshoot, um tooltip de onboarding que deve parecer tranquilo — o easing é a diferença entre uma interface que parece acabada e uma que parece padrão. Plotar a curva aqui, contra uma pré-visualização animada real, é melhor do que adivinhar quatro números em uma folha de estilos, e a experimentação fica na aba. Quando o loop parece certo, os quatro valores já estão corretos para produção.

Perguntas frequentes

Por que X só vai de 0 a 1 enquanto Y vai de −1 a 2?
O padrão CSS mantém os dois valores de X dentro de [0, 1] para que o tempo sempre avance ao longo da curva. Y não tem esse limite — valores abaixo de 0 ou acima de 1 produzem antecipação e overshoot — e esta ferramenta limita Y de −1 a 2, o que cobre todo easing prático. Oito curvas prontas, quatro coordenadas Bézier e prévia animada do ritmo. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
O que exatamente é exportado?
Uma classe .motion com três declarações: transition-duration com os seus segundos, e o mesmo valor cubic-bezier() atribuído a transition-timing-function e animation-timing-function.
Como leio a pré-visualização?
O gráfico plota a curva entre seus pontos fixos de início e fim com guias até as duas alças de controle, e a trilha abaixo anima um marcador na duração escolhida usando a função de timing real — a cadência honesta, não uma aproximação.
Como moldo um ease-in, ease-out ou efeito de mola?
Empurre o X da primeira alça em direção a 1 com um Y baixo para um ease-in de início lento; traga o X da segunda alça em direção a 0 com um Y alto para um ease-out suave. Empurre qualquer Y além de 1 para uma mola que ultrapassa o alvo, ou abaixo de 0 para antecipação.
A classe funciona tanto para transições quanto para animações de keyframes?
Sim — o mesmo valor cubic-bezier() é atribuído às duas propriedades de timing-function, e a duração fica em transition-duration. Se você só precisa de um mecanismo, apague a outra linha depois de colar; a curva em si é agnóstica ao mecanismo. Com keyframes, lembre que a função de timing se aplica entre cada par de quadros, não ao longo de toda a execução.
Algo é enviado ou armazenado?
Não. A curva é calculada e pré-visualizada localmente nesta aba, nenhuma conta é necessária e nada é registrado ou enviado. Pressione Redefinir para restaurar o ease padrão.

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de caixas de seleção CSS

CSS Checkbox Generator

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Criar

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar