📈 Editor CSS cubic-bezier

Arrastra los dos puntos de control para editar la curva cubic-bezier.

100% Gratis Sin registro Solo navegador 5 idiomas Modo oscuro

🔒 Sobre la privacidad

・Todo en el navegador
・Tus datos nunca se envían a ningún servidor
・Sin registros, sin historial, sin base de datos
・Sin registro, sin inicio de sesión, sin pago

Arrastra los puntos azul y rosa

Vista previa

Preajustes

CSS

📖 Dónde se suele tropezar

Arrastra los dos puntos de control para dar forma a una curva cubic-bezier() y observa el movimiento al instante. Todo se ejecuta en el navegador. La curva describe cómo cambia la velocidad: cuanto más empinada esté la gráfica, más rápido se mueve el elemento en ese momento. Pero ajustar sólo la aceleración no hará que el movimiento se sienta bien: lo que decide la impresión es, como mínimo por igual, la duración.

Caso	Qué ocurre	Qué hacer
Usar ease-in-out para todo	`ease-in-out` es lento en ambos extremos, así que usarlo para algo que aparece hace que el primer instante parezca que no pasó nada. En la respuesta a un clic sobre todo, eso se lee como que el botón no registró la pulsación. Lo que la gente percibe como lento no es la duración total, sino el hueco entre pulsar y el primer movimiento visible.	La convención es desacelerar al entrar y acelerar al salir. Un ease-out como `cubic-bezier(0, 0, .2, 1)` arranca de golpe y se asienta con calma, lo que se percibe como agilidad. Para cerrar o descartar, un ease-in como `cubic-bezier(.4, 0, 1, 1)` empieza suave y se va rápido, y resulta natural. Todo lo que cambia de posición pide ease-out; lo que sólo se desvanece en el sitio va bien con linear.
La curva no se nota	La duración es demasiado corta. Por debajo de unos 150 ms la diferencia entre curvas es prácticamente imperceptible y todas parecen iguales. Por encima de unos 500 ms, la animación empieza a percibirse como espera en vez de como respuesta. Una curva elaborada sólo rinde en la banda intermedia.	El rango estándar en interfaz es 150–300 ms. Un cambio de color en hover o foco pide 100–150 ms; un modal o un panel lateral, 200–300 ms; una transición de página, unos 400 ms. Como norma, cuanta más distancia se recorre, más larga la duración: 150 ms para algo que cruza toda la pantalla se ve antinaturalmente rápido. Fija primero la duración y después modela la curva.
No consigues un rebote con `cubic-bezier`	Las coordenadas Y pueden salirse de 0–1; las X, no. Subir la Y por encima de 1 te da un rebasamiento que se pasa y vuelve —`cubic-bezier(.68, -.55, .27, 1.55)` y similares—, pero un rebote que va, vuelve y vuelve a ir no se puede expresar con una sola curva bezier, porque una curva no puede volver sobre sí misma.	Para un rebote de verdad, escribe `@keyframes` o aproxímalo como una poligonal con la función `linear()`. Antes de eso, pregúntate si lo necesitas: en una interfaz de producción, un rebote se gana su sitio sólo donde de verdad quieres captar la mirada —deshacer algo, una notificación que llega—. Ponlo en algo que la gente toca todo el día y a la tercera vez estorba.

Elijas la curva que elijas, la propiedad que animas pesa órdenes de magnitud más en el rendimiento. transform y opacity se resuelven en el compositor, sin layout ni repintado, mientras que animar width, height, top o margin rehace el layout en cada fotograma. Mover algo 100 px a la derecha cuesta algo totalmente distinto con left: 100px que con transform: translateX(100px). Y ofrece siempre @media (prefers-reduced-motion: reduce): para personas con trastornos vestibulares, el movimiento amplio tiene efectos físicos reales.

📖 Cómo usar

1

Arrastra los puntos de control

Arrastra los dos puntos para reformar la curva.
2

Previsualiza el movimiento

Pulsa Play para ver la animacion.
3

Copia el CSS

Copia el snippet generado.

❓ Preguntas frecuentes

¿Se envian mis datos al servidor?

No. Todo se ejecuta en tu navegador.

¿Y puede salirse del rango 0-1?

Si. Y puede salir para efectos de rebote. X debe estar en 0-1.

¿Donde puedo usarlo?

En las propiedades transition-timing-function y animation-timing-function.

🔗 Herramientas relacionadas

🐛 ¿Encontró un problema con esta herramienta?

Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.