EN
PT
ES
Visualizador de Easing CSS / Cubic-Bezier
Arraste as alças no SVG, digite valores ou escolha entre 30+ curvas nomeadas. Prévia animada ao vivo e saída pronta para CSS, GSAP e Framer Motion.
O que é uma curva cubic-bezier?
Uma curva cubic-bezier é uma curva paramétrica definida por quatro pontos: um início (sempre 0,0), um fim (sempre 1,1) e duas alças de controle cujas coordenadas você escolhe. CSS, bibliotecas de animação JavaScript e a maioria das ferramentas de design usam essa curva para mapear o progresso da animação (0 → 1) no progresso do valor (0 → 1) — quando a curva fica abaixo da diagonal, a animação atrasa e depois alcança; acima, salta e depois assenta. Os quatro números cubic-bezier(x1, y1, x2, y2) são simplesmente as coordenadas das duas alças.
Como usar este visualizador
Arraste as duas alças coloridas dentro do SVG para moldar a curva, ou digite os quatro valores diretamente. Escolha entre 30+ presets nomeados — clássicos como easeOutCubic, o conjunto Robert Penner completo e curvas modernas de toolkits de UI (Material, swift-out da Apple). A prévia animada ao vivo move um shape com a curva atual para você sentir o timing, não só ver o formato. O painel de saída emite o mesmo easing em três sabores: CSS puro cubic-bezier(), GSAP CustomEase e tupla de array do Framer Motion — copie o que sua stack usar.
Escolhendo a curva certa
Use curvas ease-out (alças baixa-depois-alta) para entradas — o conteúdo chega rápido e assenta, sensação responsiva. Use ease-in para saídas — o olho não precisa acompanhar conteúdo que está saindo. Use ease-in-out para movimentos na tela, tipo um card deslizando de slot. Curvas com back / overshoot (onde y2 > 1) adicionam personalidade em momentos lúdicos mas soam imaturas em UI financeira ou de produtividade. Linear raramente é a escolha certa para animação de UI — soa mecânica para humanos mesmo sendo matematicamente uniforme.
Perguntas frequentes
Por que valores y às vezes ficam fora de 0–1?
x1 e x2 são restritos a 0–1 pela spec (pontos de controle não podem ultrapassar os extremos da timeline), mas y1 e y2 podem ir abaixo de 0 ou acima de 1. É assim que easings "back" funcionam — o valor brevemente ultrapassa o alvo antes de assentar, como uma mola se encaixando.Por que a curva Material bate em um conjunto de valores e Material 3 em outro?
(0,4, 0, 0,2, 1) veio com o Material 1 em 2014. O Material 3 (2021) introduziu uma família diferente baseada em sistema de spring customizado que não reduz a um cubic-bezier único — o que você vê aqui é a aproximação clássica mais próxima. Para timing exato do Material 3, use os tokens oficiais do Google.Devo usar cubic-bezier ou física de spring?
Dá pra animar isso em CSS sem JavaScript?
transition-timing-function e animation-timing-function, ambas executando na thread de compositor do navegador sem uma linha de JS. As saídas das libs só são úteis se você já anima com aquela lib — coloque o cubic-bezier no campo ease.Qual a duração certa?
Essas curvas funcionam em WebViews mobile?
cubic-bezier() está na spec CSS desde o CSS3 e veio em todo navegador mobile até 2013. Os tipos de animação aqui (transform translate / rotate / scale) também são compostos por GPU em todo lugar, então a prévia é representativa do desempenho em produção.