Editor de Cubic Bezier CSS

cubic-bezier(x1, y1, x2, y2) é uma função CSS que define uma curva de timing personalizada para transições e animações. Os quatro valores controlam dois pontos de alça que moldam como a animação acelera e desacelera ao longo de sua duração.

Os valores representam dois pontos de controle: P1 (x1, y1) e P2 (x2, y2). Os valores X representam tempo (0 = início, 1 = fim) e devem permanecer entre 0 e 1. Os valores Y representam progresso e podem sair do intervalo 0–1 para efeitos de overshoot.

As equações de easing de Robert Penner são um conjunto padrão de curvas matemáticas amplamente usadas em animação. Cada família (Sine, Quad, Cubic, etc.) tem três variantes:

• In — início lento, fim rápido
• Out — início rápido, fim lento
• InOut — início e fim lentos, meio rápido

Este editor fornece aproximações cubic-bezier dessas curvas.

Sim. Valores Y menores que 0 fazem a animação voltar temporariamente, enquanto valores maiores que 1 fazem ela ultrapassar o alvo. Isso cria efeitos de bounce e mola. A família de easing Back usa isso para seu overshoot característico.

linear se move a uma velocidade constante do início ao fim. ease começa lento, acelera no meio e desacelera no final — isso parece mais natural aos olhos humanos.

Copie a saída CSS e aplique-a às suas transições ou animações:

.element {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.element {
  animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}