Generador de cubic-bezier
Arrastra dos puntos de control para dar forma a una curva de easing cubic-bezier() de CSS, previsualiza el movimiento y copia la función de temporización, todo en tu navegador.
El generador de cubic-bezier funciona por completo en tu navegador. La curva que arrastras, la vista previa de la animación y el CSS cubic-bezier() generado nunca salen de tu dispositivo y nada se sube a ArrayKit.
Abre el formateador de CSS
Acerca de Cubic bezier
El generador de cubic-bezier te permite dar forma a una curva de easing CSS arrastrando sus dos puntos de control sobre un gráfico en vivo, y luego copia la función de temporización cubic-bezier(x1, y1, x2, y2) exacta para tu transición o animación. Empieza desde presets con nombre como ease, ease-in-out o un ease-out-back con rebote, y luego afina los tiradores con el ratón o las teclas de flecha. Un punto animado reproduce tu curva en tiempo real para que sientas la aceleración antes de pegarla. Está pensado para desarrolladores de front-end y diseñadores que ajustan el movimiento para una transition-timing-function o animation-timing-function sin adivinar los números. Todo se renderiza en tu dispositivo: la curva, la vista previa y el CSS generado nunca salen de tu navegador.
Características
- Arrastra dos puntos de control sobre una curva en vivo para dar forma al easing
- Presets con nombre: linear, ease, ease-in, ease-out, ease-in-out y curvas back
- Un punto animado y una demo de escala/opacidad reproducen la curva en tiempo real
- Copia el valor cubic-bezier() exacto y una regla transition-timing-function lista
- Desplaza cada tirador con las teclas de flecha para un ajuste preciso al píxel
- Los tiradores de sobreimpulso te permiten construir curvas ease-back con rebote con y por encima de 1
- Los valores de X se limitan automáticamente al rango 0 a 1 que exige CSS
- Reconoce y etiqueta la curva actual cuando coincide con un preset estándar
Cómo usar Cubic bezier
- Elige un preset como ease-in-out como punto de partida
- Arrastra cualquiera de los puntos de control para reformar la curva, o desplázalo con las teclas de flecha
- Observa la vista previa animada para sentir la aceleración que construiste
- Copia el valor cubic-bezier() o la regla transition-timing-function completa
- Pégalo en tu abreviatura de transición o animación CSS
Ejemplo
Entrada
control point 1: 0.34, 1.56
control point 2: 0.64, 1
Salida
.card {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
Una curva ease-out-back sobrepasa el 1 para un rebote sutil.
Errores comunes y solución de problemas
- El navegador ignora mi cubic-bezier() y recurre a linear. — Ambos valores de x deben estar dentro de 0 a 1. Esta herramienta los limita por ti, pero un x1 o x2 escrito a mano fuera de ese rango invalida todo el valor.
- La animación se ve rígida al inicio y al final. — Aleja cada tirador de su punto final. Los tiradores cerca de (0,0) y (1,1) apenas curvan la línea, así que el movimiento se mantiene casi lineal.
- Quiero un rebote pero el valor de y vuelve de golpe. — Arrastra un punto de control por encima de la parte superior del gráfico para que su y sobrepase 1 (o por debajo de 0). Solo x está restringido; el sobreimpulso de y es lo que crea la anticipación y el rebote.
- Mi preset dejó de reconocerse después de arrastrar un tirador. — Cualquier cambio vuelve la curva personalizada, así que la etiqueta del preset desaparece. Vuelve a hacer clic en el chip del preset para regresar a sus valores exactos.
Preguntas frecuentes
- ¿Qué significan los cuatro números de cubic-bezier()?
- Son las coordenadas x e y de dos puntos de control: cubic-bezier(x1, y1, x2, y2). El inicio y el final de la curva están fijos en (0,0) y (1,1), y estos dos tiradores curvan la trayectoria entre ellos para definir cómo acelera la animación.
- ¿Por qué los valores de x deben mantenerse entre 0 y 1?
- En CSS el eje x es el progreso de la animación a lo largo del tiempo, que solo avanza. Mantener x1 y x2 en 0 a 1 garantiza que la curva represente un único valor en cada momento. y puede salir de ese rango para crear sobreimpulso o anticipación.
- ¿Cómo hago un easing con rebote o sobreimpulso?
- Dale a un punto de control una y mayor que 1 o menor que 0. Por ejemplo, cubic-bezier(0.34, 1.56, 0.64, 1) sobrepasa el final antes de asentarse, lo que se percibe como un rebote suave. Arrastra un tirador por encima o por debajo del gráfico para lograrlo.
- ¿Cuál es la diferencia entre ease y ease-in-out?
- ease es cubic-bezier(0.25, 0.1, 0.25, 1) y arranca un poco más rápido que ease-in-out, que es cubic-bezier(0.42, 0, 0.58, 1) y es simétrico. ease-in-out acelera y desacelera de forma uniforme, mientras que ease carga el movimiento ligeramente al principio.
- ¿Puedo usar este valor también para animation-timing-function?
- Sí. Un cubic-bezier() funciona en cualquier sitio donde CSS acepte una función de easing, incluidas transition-timing-function, animation-timing-function y el hueco de temporización de las abreviaturas transition y animation.
- ¿Arrastrar la curva envía algo a un servidor?
- No. El editor, la vista previa animada y el CSS generado se calculan todos en tu navegador con JavaScript simple. Nada sobre tu curva se sube a ArrayKit.
Herramientas relacionadas
Todas las herramientas de ArrayKit