Generador de cubic-bezier — editor de easing CSS
Diseña curvas de easing CSS con puntos de control arrastrables, previsualiza la animación y copia el valor cubic-bezier(). Con presets, en tu navegador.
🔒 Funciona por completo en tu navegador. Tu entrada y salida no se envían a ningún servidor ni se guardan: totalmente privado.
Arrastra los dos controladores para dar forma a la curva.
Acerca de esta herramienta
Este editor de cubic-bezier te permite crear curvas de aceleración CSS a medida arrastrando dos puntos de control sobre una cuadrícula. A medida que das forma a la curva, una vista previa animada reproduce el movimiento en tiempo real, para que sientas con exactitud cómo acelerará y frenará tu transición. Cuando tenga buen aspecto, copia el valor cubic-bezier() y ponlo en una transición o animación CSS. Es mucho más expresivo que las palabras clave integradas ease y linear, y todo el editor se ejecuta localmente en tu navegador.
Preguntas frecuentes
¿Qué controla realmente una curva cubic-bezier?
Controla el ritmo de una animación: cómo se reparte el progreso a lo largo de su duración, no su longitud ni su distancia. La curva relaciona el tiempo transcurrido en el eje horizontal con cuánto ha avanzado la animación en el eje vertical, así que un tramo empinado significa movimiento rápido y uno plano, movimiento lento. Los dos puntos de control arrastrables doblan esa curva y te permiten diseñar aceleraciones que empiezan suaves, se disparan de golpe o cualquier punto intermedio.
¿Los valores de control pueden salir del rango de 0 a 1?
Los dos valores de tiempo (la X de cada punto de control) deben quedarse entre 0 y 1, pero los valores de progreso (la Y) pueden subir por encima de 1 o bajar de 0. Llevar la Y más allá de esos límites hace que la animación se pase de su destino y rebote, o que retroceda antes de lanzarse hacia adelante: la base de los efectos elásticos, de rebote y de anticipación. La vista previa muestra ese movimiento con claridad, para que ajustes justo el rebote necesario sin pasarte.
¿Dónde uso el valor y el editor funciona en mi dispositivo?
Pega el valor cubic-bezier() en una transition-timing-function o animation-timing-function de tu CSS, donde sustituye a palabras clave como ease-in-out. Funciona en todos los navegadores modernos. El editor en sí se ejecuta por completo en tu navegador con JavaScript local: la curva, la vista previa en vivo y el valor generado se calculan en tu dispositivo, así que nada de lo que creas se sube ni se guarda en un servidor.