Português
Desenhe curvas de easing CSS com preview animado ao vivo.
Última atualização
.element {
transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}Uma *função de easing* no CSS controla como uma animação acelera e desacelera ao longo da sua duração. As palavras-chave ease, ease-in, ease-out e ease-in-out são atalhos pra quatro curvas específicas. Pra qualquer coisa além delas, o CSS te dá cubic-bezier() - uma função que recebe quatro números e desenha uma curva personalizada.
Esses quatro números são as coordenadas de dois pontos de controle (x1, y1, x2, y2). Escrevê-los na mão é incômodo porque mudanças pequenas têm efeitos visuais grandes, e pequenos overshoots produzem movimento *bouncy* que não dá pra ler só nos números. Um editor visual te deixa arrastar as alças e ver a curva responder - bem mais rápido que ajustar decimais.
O editor do Coddy desenha a curva ao vivo, anima uma bola de preview usando seu easing e traz presets pros padrões comuns: as palavras-chave do CSS, a curva *standard* do Material Design, um bouncy out e um anticipate com overshoot. Copie a string cubic-bezier() e cole no CSS - tudo no navegador.
linear - progresso constante por unidade de tempo.Clique num preset perto da sensação que quer. *Material standard* e *Bouncy out* são bons pontos de partida pra UI; *ease-out* é o default seguro pra animações de entrada.
Os círculos coloridos são os dois pontos de controle. Arraste o primeiro pra ajustar como a animação *começa*; o segundo, como *termina*. Puxar uma alça pra cima do topo do canvas gera overshoot.
Escolha uma duração realista pra animação real. Transições de UI normalmente rodam 150–300ms; movimentos de ênfase 400–600ms. Clique *Replay* pra re-disparar o preview.
Pra valores precisos, digite nos inputs X1/Y1/X2/Y2. Y pode passar de 0..1 - X fica sempre em 0..1.
Clique *Copiar* pra pegar a regra transition completa. Cole no seu stylesheet e troque transform pela propriedade que você está animando.
Easings comuns e os cubic-bezier por trás. As quatro palavras-chave são apelidos de curvas específicas.
| Easing | Valores cubic-bezier | Quando usar |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | Default de transition - suave mas genérico |
linear | (0, 0, 1, 1) | Velocidade constante - geralmente ruim pra UI, ótimo pra spinners |
ease-in | (0.42, 0, 1, 1) | Começa lento, termina rápido - melhor pra saídas |
ease-out | (0, 0, 0.58, 1) | Começa rápido, termina lento - melhor pra entradas e reações |
ease-in-out | (0.42, 0, 0.58, 1) | Simétrico - bom pra toggles ida e volta |
| Material standard | (0.4, 0, 0.2, 1) | Movimento moderno e ágil de UI |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | Passa do destino e volta - entradas divertidas |
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}A maior parte do levantamento acontece logo no início, depois acomoda - parece responsivo ao cursor em vez de pesado.
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}Y2 em 1.28 faz a curva ultrapassar o destino antes de acomodar. Use com moderação - movimento bouncy cansa rápido se tudo se mexer assim.
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Y1 negativo faz a animação ir momentaneamente pro lado *oposto* antes de ir pro destino. Vindo da animação clássica - uma pequena antecipação faz o movimento principal parecer intencional.
ease-in em entradas. Começa lento e termina rápido - o oposto do que parece responsivo. Use ease-out.linear pra UI porque parece "neutro". Movimento de velocidade constante parece mecânico; é certo pra barras de progresso e spinners, raramente pra resto.cubic-bezier() significam?cubic-bezier(x1, y1, x2, y2). O primeiro molda como a animação *começa*; o segundo, como *termina*. X sempre fica entre 0 e 1 (tempo); Y pode passar de 0..1 pra efeitos de overshoot/anticipate (progresso).cubic-bezier(0.4, 0, 0.2, 1). Pra saídas, *ease-in* faz sentido. Evite *linear* fora de barras de progresso.ease e ease-out?ease também começa devagar. ease-out começa em velocidade máxima e desacelera - esse movimento *imediato* é o que parece mais responsivo.cubic-bezier(0.18, 0.89, 0.32, 1.28) ultrapassa o destino ~28% antes de assentar. Pra múltiplos bounces precisa de @keyframes ou biblioteca de spring - cubic-bezier só overshoot uma vez.@keyframes?animation-timing-function, no shorthand animation ou por keyframe. Pra movimentos em várias etapas, dá pra aplicar um easing diferente entre cada par de keyframes.