⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Curva de flexibilização CSS estilo Bounce

Projete uma função de temporização CSS cube-bezier() personalizada arrastando dois pontos de controle, visualize-a ao vivo em uma referência linear e copie o valor pronto.

Arraste a alça laranja (P1) e a alça vermelha (P2) para remodelar a curva – as teclas de seta também funcionam. X permanece preso entre 0 e 1 conforme exigido pelo CSS; arraste uma alça acima ou abaixo da caixa para enviar y além desse intervalo para efeitos de ultrapassagem e salto.

Sua curva

Linear (para comparação)

Processando... 0%

Resultado

Esta página abre o gerador com x1=0,68, y1=-0,55, x2=0,265, y2=1,55 já carregado — uma curva de overshoot que algumas bibliotecas de atenuação rotulam como easyOutBack. O y1 negativo e o y2 acima de 1 são exatamente o motivo pelo qual a visualização da animação abaixo ultrapassa o início e o fim antes de se estabilizar; arraste uma das alças ou edite os números para tornar o efeito mais forte ou mais suave.

Sendo honesto sobre o que isso é: uma única curva cúbica-bezier() tem apenas dois pontos de controle, portanto, pode aproximar-se de um movimento de ultrapassagem e acomodação, e não de um salto físico genuíno de vários saltos com vários saltos decrescentes. Para um efeito literal de salto de bola, você precisaria de vários quadros-chave ou segmentos steps() encadeados - esta curva é o mais próximo que uma função de tempo de transição simples pode chegar em uma linha.

Esse único overshoot ainda é exatamente o que a maioria das UIs saltitantes deseja: um botão que ultrapassa um pouco seu tamanho de repouso, um modal que ultrapassa antes de se acomodar, um cartão que se encaixa no lugar. Copie o valor como está para obter uma sensação rápida ou suavize y1 em direção a 0 e y2 em direção a 1 para reduzir o overshoot.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Editor de curva SVG arrastável com duas alças (P1 e P2) além de entradas de números x1/y1/x2/y2 editáveis para valores com precisão de pixel.
  • Visualização da animação em loop comparando seu tempo cúbico-bezier() personalizado com uma bola de referência linear, para que você possa ver a atenuação, não apenas lê-la.
  • String copiável de bezier cúbico (x1, y1, x2, y2) pronta para função de tempo de transição ou função de tempo de animação, além de páginas predefinidas para facilidade de entrada, salto e curva padrão do Material Design.

Principais benefícios

✓ Arraste qualquer alça do ponto de controle e observe a curva, a visualização da animação ao vivo e a string CSS copiável, todas atualizadas juntas - não há necessidade de memorizar a matemática das coordenadas.
✓ Y pode ultrapassar 0 e 1 para efeitos de mola e salto, enquanto X permanece preso ao intervalo de 0 a 1 que o CSS realmente exige, portanto, cada valor que você copia é válido no momento em que você o cola.
✓ A visualização lado a lado compara sua curva personalizada contra uma referência linear simples, de modo que a diferença na sensação de movimento - todo o motivo para usar a suavização - é óbvia à primeira vista, não apenas uma saída de código.

Casos de uso

  • • Você precisa de um valor personalizado de função de tempo de transição CSS ou função de tempo de animação em vez de uma das palavras-chave de facilidade integradas?
  • • Você quer ver exatamente como cúbico-bezier(0.42, 0, 0.58, 1) — os números reais por trás da palavra-chave easy-in-out do próprio CSS — se parece em movimento antes de enviá-lo?
  • • Você está construindo um botão saltitante, modal ou animação de cartão e precisa de uma curva de atenuação de overshoot pronta para copiar diretamente em sua folha de estilo?