Editor de Cubic Bezier
Diseña una curva de easing CSS arrastrando sus puntos de control y previsualiza el movimiento.
¿Qué es una curva de easing cubic-bezier?
Las transiciones y animaciones CSS usan una función de temporización para decidir con qué rapidez cambia el valor a lo largo del tiempo. La función cubic-bezier define esa velocidad con dos puntos de control, escritos como cuatro números: x1, y1, x2 e y2. La curva empieza en (0, 0) y termina en (1, 1); el eje horizontal es el tiempo y el vertical es el progreso.
Los valores x deben mantenerse entre 0 y 1, pero los valores y pueden salir de ese rango para crear un rebase, en el que el elemento pasa de su destino y vuelve a asentarse. Las palabras clave ease, ease-in, ease-out y ease-in-out son simplemente curvas cubic-bezier con nombre, y linear es la recta de esquina a esquina.
Cómo usar el editor
- Elige un preset o arrastra los dos tiradores de la curva.
- Pulsa repetir para ver cómo se mueve la bola con tu curva y la duración elegida.
- Copia la función de temporización y pégala en tu CSS.
Casos de uso comunes
- Movimiento de interfaz - haz que menús, modales y botones se sientan naturales y no mecánicos.
- Efectos de rebase - añade un pequeño rebote cuando un elemento se asienta en su lugar.
- Igualar un diseño - reproduce una curva de easing de un archivo de diseño de movimiento.