Editor de cubic-bezier

Cómo usar el editor de cubic-bezier

1. Arrastra los dos tiradores del gráfico. P1 (el primer punto de control) da forma al inicio del movimiento y P2, al final. El tiempo avanza de izquierda a derecha y el progreso, de abajo arriba.
2. O escribe un valor en Valor cubic-bezier(): un cubic-bezier(0.4, 0, 0.2, 1) completo, cuatro números o una palabra clave como ease-in-out. Los campos x1, y1, x2 e y2 editan una coordenada cada vez.
3. Parte del menú de Ajustes predefinidos (palabras clave CSS, las familias de Sine a Back y las curvas de Material Design) o de los botones de palabras clave. Cuando tu curva coincide con un ajuste predefinido, su nombre aparece junto a los botones.
4. Observa la Vista previa de la animación: el punto de Tu curva y el de linear recorren la misma distancia en la misma Duración. Usa Pausa/Reproducir y Reiniciar para compararlos.
5. Copia el resultado de Función de temporización CSS, o copia la Aproximación con linear() y elige su número de Segmentos.

Teclado: selecciona un tirador y usa las flechas para moverlo 0,01, o 0,1 con Mayús.

Si tu sistema está configurado para reducir el movimiento, la animación empieza en pausa. Pulsa Reproducir si quieres verla de todos modos.

Qué significa cubic-bezier()

Una función de aceleración (easing) de CSS relaciona el tiempo transcurrido de una transición (de 0 a 1) con su progreso (de 0 a 1). cubic-bezier(x1, y1, x2, y2) describe esta relación con una curva de Bézier cúbica que empieza en (0, 0), termina en (1, 1) y está atraída por dos puntos de control, P1 = (x1, y1) y P2 = (x2, y2).

• Los valores x son tiempos y deben quedar entre 0 y 1; si no, la función no sería una curva de temporización válida. El editor los mantiene dentro de ese rango.
• Los valores y son progreso y pueden bajar de 0 o superar 1. Una y mayor que 1 hace que la animación rebase su destino y vuelva, como en las curvas Back; por debajo de 0, primero retrocede.
• Una pendiente pronunciada significa movimiento rápido; una pendiente plana, movimiento lento. ease-out empieza rápido y termina despacio, lo que resulta natural para elementos que entran en pantalla. ease-in hace lo contrario y encaja con los elementos que salen.

Las palabras clave de CSS son atajos: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) y linear = (0, 0, 1, 1).

La aproximación con linear()

La función más reciente linear() enumera valores de progreso en tiempos equidistantes, por ejemplo linear(0, 0.25, 0.5, 0.75, 1), y los une con líneas rectas. La herramienta muestrea tu curva (resuelve la Bézier para cada paso de tiempo) y escribe esos valores con tres decimales. Con 20 a 40 segmentos, el resultado es visualmente idéntico a la curva. La verdadera ventaja de linear() está en las curvas que una Bézier no puede dibujar, como rebotes y muelles, pero también te permite compartir una misma sintaxis. Funciona en Chrome y Edge 113+, Firefox 112+ y Safari 17.2+, así que conserva el valor cubic-bezier() como alternativa.