¿Qué es una aceleración cubic-bezier?

Es una función de temporización para transiciones y animaciones CSS definida por dos puntos de control, escrita como cubic-bezier(x1, y1, x2, y2), que da forma a cómo cambia una propiedad a lo largo del tiempo.

¿Puede el valor y superar 1 o bajar de 0?

Sí. Los valores y fuera de 0–1 hacen que la animación se pase o retroceda, creando efectos de rebote. Solo los valores x están restringidos a 0–1.

¿Cómo se relaciona esto con ease y ease-in-out?

Esas palabras clave son curvas cubic-bezier específicas. Usa los preajustes para partir de ellas y arrastra los controles para personalizar.

¿Dónde pego el resultado?

Usa el valor cubic-bezier() como función de temporización en una transition o animation, por ejemplo transition: all 0.4s cubic-bezier(...).

¿Se envía algo a un servidor?

No. El editor funciona completamente en tu navegador y nada se sube.

Generador Cubic Bezier

Vista previa

cubic-bezier(0.25, 0.1, 0.25, 1)

transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

Herramientas externas relacionadas

Algunos enlaces son enlaces de afiliados.

AmazonEl mayor mercado en línea del mundo para compras, electrónica, libros, software y más. El envío rápido, las devoluciones sencillas y el vasto catálogo de productos lo convierten en el favorito para las compras diarias. La membresía Prime añade streaming, envío gratuito y ofertas exclusivas.UdemyUn mercado de aprendizaje en línea con más de 250.000 cursos sobre programación, diseño, negocios y más. Los cursos son impartidos por expertos del sector y disponibles a tu propio ritmo. Las frecuentes ofertas lo convierten en una de las formas más económicas de aprender.

Herramientas relacionadas

Conversor de ColorConvierte cualquier color entre HEX, RGB, HSL, HSV y RGBA a la vez. Edita un valor, copia con un clic, con alfa y contraste WCAG.Generador de Paletas de ColoresGenera paletas de colores armónicas desde un HEX base usando esquemas complementario, análogo, triádico y más. Bloquea colores, regenera el resto y exporta a CSS, Tailwind o JSON.Generador de GradientesCrea gradientes CSS lineales, radiales y cónicos con múltiples paradas de color. Ajusta ángulo, forma y centro, y copia el CSS de background o el valor de Tailwind con un clic.Extractor de Colores de ImagenExtrae la paleta de colores dominantes de cualquier imagen en tu navegador, sin subir nada. Obtén HEX, RGB y porcentaje (%) de cada color, elige cuántos colores y exporta como CSS/JSON.

Diseña una curva de aceleración CSS personalizada arrastrando dos controles, observa el movimiento en una vista previa en vivo y copia el valor cubic-bezier() y el código transition listos para usar. Es perfecto para ajustar con precisión la sensación de las animaciones. Todo funciona en tu navegador.

Cómo usarlo

Arrastra los dos controles de color o escribe valores exactos para x1, y1, x2 e y2.
Pulsa repetir para previsualizar el movimiento que produce la curva.
Copia el valor cubic-bezier() o la línea transition completa en tu CSS.

Cómo funciona

Una curva de aceleración CSS es una curva Bezier cúbica con puntos fijos en (0,0) y (1,1). Dos puntos de control dan forma a la curva entre ellos, y sus coordenadas son los cuatro números de cubic-bezier(x1, y1, x2, y2). Los valores x deben mantenerse entre 0 y 1 (el tiempo siempre avanza), pero los valores y pueden bajar de 0 o superar 1 para crear efectos de anticipación o sobrepasamiento.

Características

Arrastra para dar forma

Mueve los controles directamente sobre la curva para encontrar la aceleración que buscas.

Valores exactos

Escribe coordenadas precisas cuando necesites ajustarte a una especificación o sistema de diseño.

Vista previa en vivo

Repite el movimiento para juzgar la aceleración antes de usarla.

Preajustes estándar

Empieza desde ease, linear, ease-in, ease-out o ease-in-out y ajusta desde ahí.

Código listo para copiar

Copia el valor cubic-bezier() o una declaración transition completa.

Cuándo usarlo

Movimiento de interfaz

Ajusta cómo se mueven botones, modales y paneles para que las transiciones se sientan naturales.

Microinteracciones

Añade un ligero sobrepasamiento o anticipación a interacciones pequeñas para darles personalidad.

Aceleración coherente

Define una curva personalizada y reutilízala en todo el proyecto para lograr una sensación unificada.

Aprendizaje

Observa cómo los puntos de control cambian el movimiento para entender las funciones de aceleración.

Notas

Los valores x se limitan a 0–1 porque el tiempo no puede retroceder.
Los valores y pueden superar 0–1 para crear efectos de rebote o sobrepasamiento.
Los preajustes integrados se aproximan a las palabras clave estándar de CSS.
Todo funciona en tu dispositivo; nada se sube.

Preguntas frecuentes

¿Qué es una aceleración cubic-bezier?: Es una función de temporización para transiciones y animaciones CSS definida por dos puntos de control, escrita como cubic-bezier(x1, y1, x2, y2), que da forma a cómo cambia una propiedad a lo largo del tiempo.
¿Puede el valor y superar 1 o bajar de 0?: Sí. Los valores y fuera de 0–1 hacen que la animación se pase o retroceda, creando efectos de rebote. Solo los valores x están restringidos a 0–1.
¿Cómo se relaciona esto con ease y ease-in-out?: Esas palabras clave son curvas cubic-bezier específicas. Usa los preajustes para partir de ellas y arrastra los controles para personalizar.
¿Dónde pego el resultado?: Usa el valor cubic-bezier() como función de temporización en una transition o animation, por ejemplo transition: all 0.4s cubic-bezier(...).
¿Se envía algo a un servidor?: No. El editor funciona completamente en tu navegador y nada se sube.