Gerador CSS Easing
Editor de Curva Bézier
Pré-visualização de Animação
Efeitos de Aceleração Comuns
Gerador CSS easing online gratuito. Arraste os pontos de controle para criar curvas cubic-bezier. Predefinições integradas para ease, ease-in, ease-out, ease-in-out e linear. Pré-visualização de animação em tempo real.
Dicas e Truques
Arrastar Pontos de Control
Arraste os dois pontos de control (P1, P2) diretamente na curva para ajustar a curva de aceleração em tempo real. O eixo X representa o progresso do tempo, o eixo Y representa a mudança de propriedade, e a inclinação da curva determina a variação de velocidade da animação.
Pré-visualização ao Vivo de Animação
Clique em "Reproduzir Animação" para ver como a bola se move ao longo da trajetória da função de aceleração. A barra de progresso mostra intuitivamente o progresso do tempo.
Cópia com Um Clique CSS
Após ajustar, clique no botão "Copiar" para copiar automaticamente o código CSS cubic-bezier() para sua área de transferência, pronto para colar diretamente no seu projeto.
Casos de Uso Comuns
Animações de Entrada
ease-out
Animações de Saída
ease-in
Transições
ease-in-out
Efeitos de Flutuação
Curvas Personalizadas
Indicadores de Progresso
linear
Perguntas Frequentes
O que é cubic-bezier?
cubic-bezier é uma função CSS que define a curva de velocidade de uma animação, descrita por uma curva Bézier cúbica através de dois pontos de control: P1 (x1, y1) e P2 (x2, y2). O eixo X da curva representa o progresso do tempo (0→1), e o eixo Y representa a mudança de propriedade (0→1). Uma curva mais íngreme significa maior velocidade; uma curva mais plana significa menor velocidade.
Como uso aceleração personalizada em CSS?
Use-o diretamente nas propriedades de transição ou animação CSS: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. A área de saída de código do gerador produz automaticamente o código CSS correto. Clique para copiar e colar diretamente.
Quais são os intervalos válidos para X e Y?
CSS cubic-bezier() exige que os valores X estejam entre 0 e 1 (correspondendo ao tempo do início ao fim), e os valores Y estão tipicamente entre 0 e 1, mas podem exceder esse intervalo (para criar efeitos de ricochete). Esta ferramenta restringe X a [0, 1] e Y a [0, 1] para garantir que as curvas geradas sejam funções de aceleração CSS válidas.
Qual é a diferença entre as acelerações predefinidas?
ease: Rápido depois lento depois rápido, adequado para transições gerais.
ease-in: Lento para rápido, adequado para animações de saída (elementos saindo).
ease-out: Rápido para lento, adequado para animações de entrada (elementos entrando), a aceleração mais usada.
ease-in-out: Lento em ambas as extremidades, rápido no meio, mais suave que ease.
linear: Velocidade constante, adequado para rotações e outras animações que não precisam de aceleração.