¿Qué es una Curva Cubic Bezier CSS?
Una curva cubic bezier define cómo progresa una animación o transición CSS a lo largo del tiempo. En lugar de moverse a velocidad constante, puedes hacer que los elementos se animen lentamente al inicio, aceleren rápidamente o incluso se adelanten y reboten hacia atrás.
cubic-bezier(x1, y1, x2, y2) toma cuatro valores que controlan dos puntos en una curva. Estos puntos determinan la aceleración y desaceleración de tu animación — la forma de la curva es la forma de tu movimiento.¿Por Qué Usar un Editor Visual?
Escribir valores cubic-bezier a mano es como pintar con coordenadas — técnicamente posible pero increíblemente frustrante. Un editor visual te permite:
Retroalimentación Visual
Comparación Lado a Lado
Biblioteca de Presets
Pruebas en Tiempo Real
Cómo Usar
Dale Forma a Tu Curva
Arrastra los dos controladores de puntos de control en el lienzo para dar forma a tu curva de animación. El controlador índigo (P1) controla el inicio de la animación, mientras que el controlador ámbar (P2) controla el final.
Usa Presets
Elige entre 29 presets integrados organizados por familia. El grupo CSS incluye las cinco palabras clave estándar (linear, ease, ease-in, ease-out, ease-in-out). Las familias Penner (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back) cada una ofrece tres variantes: In, Out e InOut.
Obtén Vista Previa de Tu Animación
Observa cómo la bola animada se mueve según tu curva en tiempo real. Activa Comparar para ver una segunda bola moviéndose a velocidad lineal junto a la tuya — esto facilita entender cómo tu curva difiere del movimiento constante.
La vista previa multpropiedad muestra cómo se ve tu animación aplicada a Posición, Escala, Rotación y Opacidad simultáneamente. Ajusta el deslizador de Duración para probar diferentes velocidades.
Copia el Código
Haz clic en el botón Copiar para obtener el código CSS completo incluyendo tanto transition-timing-function como animation-timing-function. También puedes hacer clic directamente en el texto del valor cubic-bezier para una copia rápida.
Características
Lienzo Bezier Interactivo
Un lienzo basado en SVG muestra tu curva cubic bezier con una cuadrícula de coordenadas, etiquetas de ejes y una línea de referencia lineal diagonal.
- Dos puntos de control arrastrables
- Visualización de coordenadas en tiempo real
- Cuadrícula visual y etiquetas de ejes
29 Presets de Animación
Comienza con cualquiera de los 29 presets organizados en 9 grupos: las 5 animaciones estándar CSS más 24 funciones de animación Penner en 8 familias.
- Animaciones estándar CSS (5)
- Familias Penner (24 variantes)
- Miniaturas de curva
Comparación de Carrera
Compara tu curva personalizada contra la animación lineal con una animación de carrera de bolas lado a lado.
- Comparación lado a lado
- Diferencias visuales de velocidad
- Comprensión instantánea
Vista Previa Multpropiedad
Ve cómo tu curva de animación afecta cuatro propiedades CSS diferentes a la vez: Posición, Escala, Rotación y Opacidad.
- Posición (movimiento horizontal)
- Escala (cambio de tamaño)
- Efectos de Rotación y Opacidad
Soporte de Rebote
Los valores Y pueden extenderse más allá del rango estándar 0–1 (de -0.5 a 1.5), permitiéndote crear curvas que se adelanten a su objetivo y reboten hacia atrás.
- Rango: -0.5 a 1.5
- Efectos de rebote
- Animaciones con sensación natural
Duración Ajustable
Prueba tu animación a diferentes velocidades con el deslizador de duración, que va desde 200ms para microinteracciones rápidas hasta 3 segundos para transiciones lentas y dramáticas.
- Rango de 200ms a 3000ms
- Pruebas de velocidad en tiempo real
- Selección de tiempo perfecto
Preguntas Frecuentes
¿Qué es cubic-bezier en CSS?
cubic-bezier(x1, y1, x2, y2) es una función CSS que define una curva de tiempo personalizada para transiciones y animaciones. Los cuatro valores controlan dos puntos de control que dan forma a cómo la animación acelera y desacelera durante su duración.
¿Qué significan los cuatro valores?
Los valores representan dos puntos de control: P1 (x1, y1) y P2 (x2, y2). Los valores X representan el tiempo (0 = inicio, 1 = fin) y deben mantenerse entre 0 y 1. Los valores Y representan el progreso y pueden salirse del rango 0–1 para efectos de rebote.
¿Qué son las funciones de animación Penner?
Las ecuaciones de animación de Robert Penner son un conjunto estándar de curvas matemáticas ampliamente utilizadas en animación. Cada familia (Sine, Quad, Cubic, etc.) tiene tres variantes:
- In — inicio lento, final rápido
- Out — inicio rápido, final lento
- InOut — inicio y final lento, medio rápido
Este editor proporciona aproximaciones cubic-bezier de estas curvas.
¿Pueden los valores Y ser menores que 0 o mayores que 1?
Sí. Los valores Y menores que 0 hacen que la animación vaya temporalmente hacia atrás, mientras que los valores mayores que 1 hacen que se adelante al objetivo. Esto crea efectos de rebote y similares a resortes. La familia Back de animación usa esto para su rebote característico.
Movimiento Hacia Atrás
- La animación va hacia atrás temporalmente
- Crea efecto de anticipación
Movimiento de Rebote
- La animación se adelanta al objetivo
- Crea efecto de rebote
¿Cuál es la diferencia entre ease y linear?
linear se mueve a velocidad constante de inicio a fin. ease comienza lentamente, acelera en el medio y desacelera al final — esto se siente más natural al ojo humano.
¿Cómo uso el código generado?
Copia la salida CSS y aplícala a tus transiciones o animaciones:
.element {
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.element {
animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
Aún no hay comentarios. ¡Sé el primero en comentar!