Generador de Cubic Bezier CSS
Arrastra los dos tiradores para dar forma a una curva de easing, mira un punto recorrerla frente a otro a ritmo constante y copia el valor cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)La curva se dibuja en tu navegador. Nada de lo que configures aquí se sube a BroBroGo.
Preguntas frecuentes
¿Qué significan los dos tiradores y los cuatro números?
La curva va de abajo a la izquierda (el inicio) a arriba a la derecha (el final): el tiempo avanza de izquierda a derecha y el progreso hacia arriba. Los dos tiradores son los puntos de control que la doblan; cada uno tiene una X y una Y, así que juntos forman cubic-bezier(x1, y1, x2, y2). La X se mantiene entre 0 y 1, mientras que la Y puede subir por encima o bajar por debajo del recuadro para que el movimiento se pase de largo o retroceda antes de asentarse.
¿Cómo uso el valor en mi CSS?
Copia el cubic-bezier() y ponlo donde vaya una función de tiempo: transition-timing-function, animation-timing-function o la forma abreviada, p. ej. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Las palabras clave ease, ease-in, ease-out y ease-in-out no son más que curvas cubic-bezier fijas, así que elegir uno de esos ajustes te muestra el valor exacto que hay detrás de la palabra clave.
¿Puede hacer un efecto de rebote o elástico?
Por sí solo no. Una única cubic-bezier puede anticipar y pasarse de largo (los ajustes «back» sacan un tirador fuera del recuadro justo para eso), pero solo puede ir en un sentido y luego asentarse. El rebote y el efecto elástico cambian de dirección varias veces, algo que ninguna cubic-bezier única puede expresar; para eso necesitas keyframes de CSS o la función linear() con muchas paradas.