Visualizador de easing y cubic-bezier CSS

Arrastra los dos puntos de control sobre la curva, elige un preajuste o pega una cadena de easing CSS. El punto animado dirige una vista previa en vivo con una duración configurable, y el panel de abajo está listo para copiar en una regla transition o animation. 100% en el navegador, sin conexión.

t (tiempo) progreso
s

Preajustes

Vista previa en vivo

El punto sigue la curva de easing en tiempo real. Pulsa Reproducir vista previa para reiniciar el cuadro al inicio del rail y verlo deslizarse hasta el final con tu curva. El control de abajo te permite desplazarte manualmente.

●
t = 0.000 · y = 0.000

CSS listo para copiar

transition-timing-function 
 
 
 
 animation-timing-function  
 
 
 
 
  
 
 Referencia — cubic-bezier() en un párrafo 
 

Un easing cubic-bezier(x1, y1, x2, y2) en CSS describe una
          curva cúbica desde (0, 0) hasta (1, 1) con
          dos puntos de control (x1, y1) y (x2, y2).
          Las coordenadas x deben permanecer en [0, 1] para
          que la curva sea monótona en el tiempo (no puede ir hacia atrás).
          Las coordenadas y pueden rebasar — describen la salida
          suavizada y pueden viajar por debajo de 0 o por encima de 1, que
          es como la familia back de easings produce su
          característico tirón hacia atrás y sobrepaso.

 

El navegador resuelve la curva como una cúbica paramétrica en
(x(t), y(t)) y encuentra el t donde
x(t) coincide con el progreso actual de la animación.
          Aquí hacemos lo mismo con Newton-Raphson y una red de seguridad
          de bisección, para que puedas previsualizar exactamente lo que
          dibujará el navegador.