Gerador de Easing CSS
Gerador online gratuito de easing CSS. Arraste os pontos de controle do cubic-bezier em uma curva interativa, escolha entre 18 presets, veja uma animação de bola em loop e copie a função de temporização na hora.
O que é uma função de easing no CSS?
Uma função de easing controla o ritmo com que uma animação ou transição avança no tempo. Um elemento não precisa se mover em velocidade constante: pode começar devagar, acelerar, ultrapassar o alvo e assentar. No CSS isso é definido com transition-timing-function ou animation-timing-function.
O que significam os quatro números do cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) define uma curva por meio de dois pontos de controle. O primeiro molda o início do movimento e o segundo o final. X representa o tempo numa escala de 0 a 1, e Y representa o progresso, onde 0 é o valor inicial e 1 o final.
Por que Y pode sair de 0 a 1 e X não?
X é mapeado no tempo real, então um valor abaixo de 0 ou acima de 1 quebraria a causalidade e a especificação proíbe. Y é livre: acima de 1 ultrapassa o alvo e abaixo de 0 recua antes de avançar; é assim que os presets Back criam a sensação de quique.
Qual a diferença entre ease, ease-in e ease-out?
ease é o padrão do navegador, com início suave e pouso suave; ease-in começa lento e termina rápido; ease-out começa rápido e desacelera; ease-in-out combina os dois. O gerador inclui ainda sine, quad, cubic, quart, expo, back e material — 18 no total.
Como funciona a pré-visualização com a bola?
Duas bolas repetem em loop pela duração definida. A bola de cima sempre se move com uma função linear de referência, enquanto a de baixo usa a sua curva. A distância entre elas, crescendo e encolhendo, mostra exatamente o que o seu easing muda.
Onde colo o valor gerado?
Use-o como valor de transition-timing-function ou animation-timing-function, por exemplo transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. A ferramenta gera a função cubic-bezier(...) pura, pronta para qualquer regra.
A função de easing afeta o desempenho da animação?
A função de temporização em si não custa nada: ela apenas remapeia o progresso ao longo do tempo. O desempenho depende de quais propriedades você anima: transform e opacity são amigáveis à GPU, enquanto animar propriedades de layout como width ou top causa reflows caros independentemente do easing.
Posso criar um efeito de quique ou elástico de verdade?
Um único cubic-bezier pode ultrapassar uma vez, mas não produz os múltiplos quiques de um efeito bounce ou elástico real. Para isso, encadeie vários keyframes em @keyframes ou use a Web Animations API; já a ultrapassagem suave única é exatamente o que o cubic-bezier faz bem e o que esta ferramenta oferece.
O que faço aqui é enviado para algum servidor?
Não. A curva é desenhada num canvas local e a animação de pré-visualização roda inteiramente no seu navegador. Nada é transmitido a servidores, então o gerador também funciona offline depois que a página carrega.
Como usar Gerador de Easing CSS
Esculpa curvas de easing CSS visualmente em vez de adivinhar números. Arraste os pontos de controle, compare seu movimento com uma referência linear e copie o cubic-bezier pronto em um clique. Tudo roda localmente no seu navegador.
- Escolha um dos 18 predefinidos, como Ease Out, Expo Out ou Back Out, como ponto de partida.
- Arraste as duas alças da curva: o eixo X é o tempo e deve ficar entre 0 e 1; o eixo Y é o progresso e pode ultrapassar.
- Ajuste com precisão as coordenadas exatas de P1 e P2 nos campos numéricos se precisar de exatidão.
- Ajuste o controle deslizante de duração e observe as duas bolas em loop — a oca é sempre linear, a cheia usa sua curva.
- Copie o valor cubic-bezier gerado para transition-timing-function ou animation-timing-function.
Empurre uma alça de Y acima de 1 para um overshoot confiante, como cubic-bezier(0.34, 1.56, 0.64, 1) — faz botões e cartões parecerem saltitantes sem nenhum keyframe.
Ferramentas relacionadas
- Gerador de Gradientes CSS Crie gradientes CSS impressionantes visualmente. Gere gradientes lineares, radiais e cônicos com múltiplas paradas de cor, ângulos e posições. Copie código CSS pronto para produção instantaneamente.
- Gerador de Loaders CSS Gerador de loaders CSS grátis: dez spinners de carregamento em CSS puro com controle ao vivo de tamanho, velocidade, espessura e cor, e cópia de HTML e CSS prontos para colar.
- Gerador de Border Radius Criativo Gerador de border radius criativo gratuito online. Arraste 8 pontos ou escolha uma forma blob para criar figuras CSS orgânicas e copiar o código na hora.
- Conversor de Cor Conversor de cor online gratuito. Converta formatos HEX, RGB, HSL, HSV instantaneamente com seletor visual. 100% privado, funciona no seu navegador.
- Gerador de Text Shadow CSS Gerador online gratuito de text-shadow CSS. Empilhe várias camadas de sombra com deslocamento, desfoque, cor e opacidade, teste presets como Neon, 3D ou Retrô e copie o CSS na hora.
- Gerador de Clip Path CSS Gerador online gratuito de clip-path CSS. Crie formas polygon, circle, ellipse e inset com pontos arrastáveis, visualização ao vivo e cópia do código CSS em um clique.
- Embelezador CSS Formate e embeleze código CSS instantaneamente. Converta CSS minificado em código legível e bem indentado com opções personalizáveis.
- Minificador CSS Minificador CSS online gratuito. Comprima e otimize código CSS instantaneamente removendo espaços, comentários e caracteres desnecessários. Reduza o tamanho do arquivo para melhor desempenho web.