Cómo funciona el generador cubic-bezier
La herramienta presenta un lienzo interactivo donde puede arrastrar los puntos de control para definir los cuatro parámetros de la función cubic-bezier. Cada movimiento modifica la forma de la curva y, en tiempo real, se actualiza una animación de ejemplo para mostrar el efecto exacto sobre una transición CSS.
Al finalizar, puede copiar el string cubic-bezier() generado para colocarlo directamente en su código CSS. Todo el proceso ocurre en su navegador, sin enviar ningún dato fuera de su dispositivo.
Opciones y límites del editor
Puede ajustar los valores de los puntos de control dentro del rango permitido por CSS: los valores de X deben estar entre 0 y 1 para garantizar una progresión temporal válida, mientras que los valores de Y pueden exceder ese rango, permitiendo crear efectos de rebote o sobresalto.
El generador no exporta a otros formatos ni admite otros tipos de funciones de suavizado como springs o steps. Tampoco se integra con herramientas externas ni frameworks, y solo soporta la edición mediante arrastre visual.
Consejos para elegir la curva adecuada
La elección de la curva depende del efecto deseado en su interfaz. Para transiciones suaves, las curvas tipo ease-in-out son adecuadas, mientras que para efectos de rebote puede experimentar con valores de Y fuera del rango estándar.
El demo permite modificar la duración de la animación, para que observe cómo la curva responde en diferentes tiempos. Se recomienda que las transiciones de UI duren entre 200 ms y 500 ms según el contexto, pero puede ajustar y probar según sus necesidades.
Preguntas frecuentes
¿Cómo elijo la curva cubic-bezier adecuada para mi animación?
Depende del tipo de transición que desee. Las curvas ease-in, ease-out y ease-in-out ofrecen efectos naturales para la mayoría de interfaces. Pruebe diferentes puntos de control y visualice el resultado para ajustar la experiencia.
¿Puedo crear efectos de rebote o sobresalto?
Sí, el generador permite modificar los valores Y para crear curvas que producen rebote o sobresalto. Observe la animación de ejemplo y ajuste según el efecto buscado.
¿Cuál es la duración recomendada para una transición de interfaz?
Entre 200 ms y 500 ms es lo recomendado para transiciones de UI. Puede cambiar la duración en el demo y comparar cómo afecta la percepción del movimiento.
¿La herramienta guarda mis curvas o envía datos?
No. Toda la edición y visualización ocurre localmente en su navegador. Ningún dato se sube ni se almacena fuera de su dispositivo.
¿El cubic-bezier generado funciona en todos los navegadores?
Sí, el string cubic-bezier() resultante es compatible con todos los navegadores y entornos CSS modernos. Puede copiarlo y usarlo en cualquier proyecto web.
¿Puedo previsualizar la animación con diferentes duraciones?
Sí, puede cambiar la duración de la animación de prueba y ver inmediatamente cómo responde la curva a distintos tiempos.
¿Algo no funciona o tienes una idea para esta herramienta? Cuéntanos