Generador cubic-bezier: arrastra una curva de easing y copia el CSS | We.Inc
Arrastra dos tiradores para dar forma a una curva de easing cubic-bezier(), haz que compita con linear y ease, parte de las palabras clave de la especificación o de los presets de Tailwind y copia el CSS o una clase de Tailwind.
Una curva de easing cubic-bezier(x1, y1, x2, y2) va de 0,0 a 1,1 y la doblan dos puntos de control. Los dos valores x deben quedarse entre 0 y 1 o el navegador descarta la declaración entera, mientras que los valores y pueden bajar de 0 o pasar de 1 para sobrepasar el destino. Arrastra los tiradores de abajo y mira cómo compiten los puntos.
Las palabras clave de easing de CSS como valores cubic-bezier() (CSS Easing Functions Level 1)
Palabra clave
Valor cubic-bezier()
Sensación
cubic-bezier(0, 0, 1, 1)
Velocidad constante, mecánica
ease (el valor por defecto)
cubic-bezier(0.25, 0.1, 0.25, 1)
Arranque rápido, frenada larga y suave
cubic-bezier(0.42, 0, 1, 1)
Arranque lento, parada brusca
cubic-bezier(0, 0, 0.58, 1)
Arranque rápido, aterrizaje suave
cubic-bezier(0.42, 0, 0.58, 1)
Suave en ambos extremos
Escribir cuatro números e intentar adivinar cómo se van a sentir casi nunca funciona. Aquí das forma a la curva a mano, ves cómo se actualizan los números y comparas el movimiento lado a lado con una línea recta y con el valor por defecto del navegador antes de pegar nada en tu hoja de estilos.
Arrastra los tiradores azul y rosa del gráfico, o escribe números exactos en los cuatro campos. Los campos x se limitan al rango de 0 a 1.
Pulsa Reproducir para lanzar tres puntos por la pista a la vez: tu curva, linear y ease.
Elige un preset para partir de las palabras clave de la especificación, los valores por defecto de Tailwind o una de nuestras curvas con rebote.
Copia la declaración CSS o la clase arbitraria de Tailwind.
Usa ease-out para lo que entra en pantalla y ease-in para lo que sale. Los elementos que se mueven entre dos puntos visibles suelen quedar mejor con ease-in-out.
Un y1 mayor que 1 hace que el movimiento se pase del destino y vuelva a asentarse. En movimientos de interfaz, mantén el rebote pequeño, entre 1.2 y 1.6 aproximadamente.
Las duraciones cortas esconden las diferencias entre curvas. Juzga una curva a 600 milisegundos o más y luego acórtala.
Respeta a quien pide menos movimiento: envuelve los desplazamientos grandes en @media (prefers-reduced-motion: no-preference).
Preguntas frecuentes
¿Qué significan los cuatro números de cubic-bezier()?
Son las coordenadas de los dos puntos de control: x1 e y1 para el primero, x2 e y2 para el segundo. El eje x es la parte de la duración que ya ha pasado y el eje y es cuánto ha avanzado el valor animado.
¿Por qué se ignora mi cubic-bezier?
Si alguno de los valores x es menor que 0 o mayor que 1, la función no es válida y el navegador descarta la declaración, volviendo al valor que se aplicaba antes. Comprueba que x1 y x2 están entre 0 y 1.
¿Los ease-in y ease-out de Tailwind son iguales que las palabras clave de CSS?
No. El tema por defecto de Tailwind define ease-in como cubic-bezier(0.4, 0, 1, 1), ease-out como cubic-bezier(0, 0, 0.2, 1) y ease-in-out como cubic-bezier(0.4, 0, 0.2, 1), que difieren de las palabras clave CSS del mismo nombre. Los dos conjuntos están como presets en el editor para que puedas compararlos.
¿Cómo uso una curva personalizada en Tailwind?
Escribe el valor entre corchetes sin espacios, por ejemplo ease-[cubic-bezier(0.34,1.56,0.64,1)]. Para reutilizarla, declara una variable de tema como --ease-springy en @theme y Tailwind crea una clase ease-springy.
¿Puede una curva bezier hacer un rebote con varios saltos?
No. Una sola curva cúbica puede pasarse una vez y volver, pero no puede rebotar varias veces. Para un rebote con varios saltos, usa @keyframes con varios pasos o la función más reciente linear(), que acepta una lista de puntos.
Cómo leer el gráfico
El tiempo avanza de izquierda a derecha y el progreso de abajo arriba. Una parte empinada de la curva significa movimiento rápido; una parte plana, que el elemento apenas se mueve. La línea de esquina a esquina es el movimiento lineal.
Los tiradores por encima del borde superior o por debajo del inferior llevan el progreso por un momento más allá del 100 por ciento o por debajo del 0 por ciento. Así consigues un rebote suave sin escribir keyframes.
Dónde va la curva en CSS
El mismo valor sirve en transition-timing-function, animation-timing-function y en los atajos transition y animation. Dentro de @keyframes, una función de temporización definida en un keyframe solo se aplica al tramo hasta el siguiente keyframe.
Algunas propiedades no pueden bajar de cero, como opacity o un ancho. Si una curva se pasa por debajo de 0, esos valores se recortan, así que la bajada simplemente no se ve.
Valores de los presets
Los cinco primeros vienen de la especificación CSS Easing Functions. Las filas de Tailwind son el tema por defecto de ese framework. Las filas con rebote son puntos de partida que ajustamos a ojo.
Todos los presets del editor
Nombre
Origen
Valor
Palabra clave CSS
cubic-bezier(0, 0, 1, 1)
Palabra clave CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
Palabra clave CSS
cubic-bezier(0.42, 0, 1, 1)
Palabra clave CSS
cubic-bezier(0, 0, 0.58, 1)
Palabra clave CSS
cubic-bezier(0.42, 0, 0.58, 1)
ease-in (Tailwind)
Por defecto en Tailwind
cubic-bezier(0.4, 0, 1, 1)
ease-out (Tailwind)
Por defecto en Tailwind
cubic-bezier(0, 0, 0.2, 1)
ease-in-out (Tailwind)
Por defecto en Tailwind
cubic-bezier(0.4, 0, 0.2, 1)
salida elástica
Rebote
cubic-bezier(0.34, 1.56, 0.64, 1)
Rebote
cubic-bezier(0.6, -0.4, 0.4, 1.4)
Rebote
cubic-bezier(0.2, 0.9, 0.3, 1.1)
Usar una curva personalizada
Tarjeta con rebote al pasar el ratón
Pasa el ratón por la tarjeta. Se eleva un poco más allá de su posición de reposo y se asienta, todo gracias a la función de temporización.
Tailwind: clase puntual y token de tema reutilizable
La forma con corchetes no admite espacios. La variable de @theme convierte la curva en una clase con nombre.
Editor de curvas de easing
Arrastra los tiradores o escribe valores, pulsa Reproducir para que tu curva compita con linear y ease, y luego copia el CSS o la clase de Tailwind.
Palabra clave CSS
Palabra clave CSS
Palabra clave CSS
Palabra clave CSS
Palabra clave CSS
Por defecto en Tailwind
Por defecto en Tailwind
Por defecto en Tailwind
Rebote
Rebote
Rebote
Gráfico de la curva de easing. Arrastra los dos tiradores para cambiar la curva.
Primer punto de control
Segundo punto de control
Presets de easing
Duración: {n} ms
Reproducir
Tu curva
Copiar CSS
Copiar clase de Tailwind
Esta curva equivale a la palabra clave CSS {v}.
Los valores x se quedan entre 0 y 1. Los valores y pueden pasarse.