Generador visual de cubic-bezier para aceleración CSS
Este generador de cubic-bezier te permite crear curvas de aceleración CSS personalizadas a ojo en lugar de a tientas. Arrastra dos puntos de control, observa cómo cambia la curva en tiempo real y copia el valor exacto de cubic-bezier() para tus transiciones y animaciones.
Está pensado para desarrolladores front-end, diseñadores de interfaz y cualquiera que ajuste el movimiento y esté cansado de escribir cuatro números a ciegas. Parte de uno de los 29 preajustes y luego mueve los controladores hasta que tu ease-in, ease-out o rebote se sienta exactamente como quieres.
Cómo usar el editor
Da forma a tu curva
Arrastra los dos controladores de los puntos de control en el lienzo para doblar la curva de aceleración. El controlador P1 moldea el inicio del movimiento y el controlador P2 moldea el final. Sus coordenadas aparecen mientras arrastras.
Escribe valores exactos
¿Prefieres precisión? Escribe los cuatro números en los campos debajo del lienzo. Los valores X se mantienen entre 0 y 1, mientras que los valores Y pueden ir de -0.5 a 1.5 para lograr efectos de overshoot.
Parte de un preajuste
Toca cualquiera de los 29 preajustes para aplicarlo al instante y luego sigue ajustando. Los estándares de CSS (linear, ease, ease-in, ease-out, ease-in-out) y las ocho familias Penner están a un solo clic.
Previsualiza el movimiento
Observa cómo se mueve la bola animada con tu curva. Activa Comparar para enfrentarla contra el movimiento linear y arrastra el control de Duración para probar velocidades desde 200 ms hasta 3 segundos.
Copia el CSS
Pulsa Copiar para obtener tanto transition-timing-function como animation-timing-function. También puedes tocar el propio valor cubic-bezier para una copia rápida.
Funciones
Lienzo Bezier interactivo
Un lienzo SVG con cuadrícula de coordenadas, etiquetas de ejes y una línea diagonal de referencia linear. Arrastra los puntos de control P1 y P2 para dar forma a la curva, con las coordenadas en vivo mientras te mueves.
29 preajustes de aceleración
Las 5 aceleraciones estándar de CSS más 24 funciones Penner repartidas en 8 familias (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back), cada una con una miniatura de su curva.
Comparación a la par
Ejecuta tu curva personalizada junto a la aceleración linear en una carrera de bolas a la par, para ver de inmediato dónde tu movimiento se siente rápido, lento o pausado.
Vista previa de varias propiedades
Mira cómo una sola curva de aceleración impulsa cuatro propiedades CSS a la vez: Posición, Escala, Rotación y Opacidad, para que elijas la sensación correcta según tu caso.
Soporte de overshoot
Los valores Y pueden ir de -0.5 a 1.5, lo que te permite crear curvas que sobrepasan y rebotan para un movimiento vivo y con efecto de resorte, como la familia Back.
Campos numéricos
Cuatro campos de entrada se mantienen en perfecta sincronía con el lienzo, así puedes escribir valores exactos o leer los números detrás de cualquier curva que arrastres.
Duración ajustable
Prueba tu aceleración a cualquier velocidad con un control de duración desde 200 ms para microinteracciones ágiles hasta 3 segundos para transiciones lentas y dramáticas.
CSS listo para copiar
Obtén una salida limpia tanto para transition-timing-function como para animation-timing-function, con copia en un clic y copia rápida sobre el texto del valor.
Preguntas frecuentes
¿Qué es cubic-bezier en CSS?
cubic-bezier(x1, y1, x2, y2) es una función de CSS que define una curva de tiempo personalizada para transiciones y animaciones. Los cuatro números controlan dos puntos controladores que dan forma a cómo la animación acelera y desacelera a lo largo de su duración.
¿Qué significan los cuatro valores de cubic-bezier?
Son dos puntos de control: P1 (x1, y1) y P2 (x2, y2). Los valores X representan el tiempo, donde 0 es el inicio y 1 es el final, y deben mantenerse entre 0 y 1. Los valores Y representan el progreso y pueden salir del rango de 0 a 1 para lograr overshoot.
¿Cómo creo una curva de aceleración con rebote u overshoot?
Pon un valor Y por debajo de 0 o por encima de 1. Un valor por debajo de 0 hace que el movimiento retroceda un instante, y un valor por encima de 1 hace que sobrepase el objetivo antes de asentarse, lo que crea una sensación de rebote o resorte. La familia de preajustes Back se basa en este truco. En este editor, Y puede ir de -0.5 a 1.5.
¿Qué son las funciones de aceleración Penner?
Las ecuaciones de aceleración de Robert Penner son un conjunto estándar de curvas de movimiento muy usadas en animación. Cada familia (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back) viene en tres variantes: In para un inicio lento, Out para un final lento e InOut para ambos. Este editor ofrece aproximaciones cubic-bezier de esas curvas como preajustes.
¿Cuál es la diferencia entre cubic-bezier y ease-in-out?
ease-in-out es solo una palabra clave con nombre para una curva cubic-bezier específica (0.42, 0, 0.58, 1) que empieza y termina lento. cubic-bezier() es la función general que te deja definir cualquier curva que quieras, incluida ease-in-out e incontables otras que las palabras clave no pueden expresar. Usa Comparar para ver en qué se diferencia una curva personalizada de la linear.
¿Cómo uso el código generado?
Copia la salida y aplica el valor a tu transición o animación, por ejemplo transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); o animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);. El editor genera las propiedades timing-function tanto de transition como de animation, para que puedas usar la que necesites.
Aún no hay comentarios. ¡Sé el primero en comentar!