Visualizador de Easing y Animación CSS

Ajusta el tiempo de animación CSS viendo la curva de easing y una vista previa en vivo a la vez.

Entradas:

• Escribe un cubic-bezier(x1, y1, x2, y2) personalizado, elige un preset con nombre (linear, ease, ease-in/out, ease-in/out-back, ease-in/out-expo, snappy…), o escribe una palabra clave.
• Ajusta duración (ms) y retardo (ms).

El informe muestra:

• La curva de easing (progreso vs tiempo) como SVG, con los dos puntos de control Bézier marcados, contra una referencia lineal discontinua. Las curvas con rebasamiento (y<0 o y>1, como ease-out-back) se señalan porque producen rebote pero pueden causar saltos de layout.
• Tres vistas previas en vivo — translateX, opacity y scale — animadas con el easing CSS real, con botón de repetición.
• CSS listo para copiar en formato transition y @keyframes.

El solucionador Bézier usa Newton-Raphson con respaldo de bisección para mapear tiempo → progreso igual que los navegadores.