EnglishGenerador de cubic-bezier (easing CSS)
Dibuja curvas de animación cubic-bezier arrastrando los puntos de control, compáralas con ease, ease-in-out y otras curvas predefinidas y copia el CSS de la transición.
Editor de curva cubic-bezier
Todo se hace en tu dispositivo: nada se envía a internet.
Disponible en: 
Generador de cubic-bezier (easing CSS): para qué sirve
Arrastra los dos puntos de control en el gráfico o elige una curva predefinida, como ease, resorte y anticipación. Ajusta la duración y compara la animación de tu curva con una linear antes de copiar el CSS a transition o animation.
Cómo usar
- Elige una plantilla o arrastra los puntos.
- Define la duración y prueba la animación.
- Copia el CSS.
Cuándo usar
- Crear animaciones más naturales en interfaces.
- Ajustar transiciones de menús y modales.
- Estudiar funciones de easing.
Preguntas frecuentes
¿Qué es cubic-bezier?
Es la función que define la aceleración de una transición o animación CSS. Los cuatro números son las coordenadas x e y de dos puntos de control; x va de 0 a 1 y y puede salirse de esos límites para crear un efecto de resorte.
¿Qué curva usar en interfaces?
Para elementos que entran en pantalla, las curvas que desaceleran al final, como cubic-bezier(0.22, 1, 0.36, 1), se ven más naturales. Para las salidas, prefiere curvas que aceleran, como ease-in.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas y funcionan directo en tu navegador.