EnglishGerador de cubic-bezier (easing CSS)
Desenhe curvas de animação cubic-bezier arrastando os pontos de controle, compare com ease, ease-in-out e outras curvas prontas e copie o CSS da transição.
Editor de curva cubic-bezier
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Gerador de cubic-bezier (easing CSS): para que serve
Arraste os dois pontos de controle no gráfico ou escolha uma curva pronta, como ease, mola e antecipação. Ajuste a duração e compare a animação da sua curva com uma linear antes de copiar o CSS para transition ou animation.
Como usar
- Escolha um modelo ou arraste os pontos.
- Defina a duração e teste a animação.
- Copie o CSS.
Quando usar
- Criar animações mais naturais em interfaces.
- Ajustar transições de menus e modais.
- Estudar funções de easing.
Perguntas frequentes
O que é cubic-bezier?
É a função que define a aceleração de uma transição ou animação CSS. Os quatro números são as coordenadas x e y de dois pontos de controle; x vai de 0 a 1 e y pode passar desses limites para criar um efeito de mola.
Qual curva usar em interfaces?
Para elementos que entram na tela, curvas que desaceleram no fim, como cubic-bezier(0.22, 1, 0.36, 1), parecem mais naturais. Para saídas, prefira curvas que aceleram, como ease-in.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.