Generador de Bézier cúbico CSS

Documentación de Bézier ¿

Qué es una curva cúbica de Bézier?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

Sintaxis

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

uso comunes

Transiciones animadas:Cree animaciones suaves para elementos que cambian de propiedad.
Efectos de desplazamiento:controla la velocidad de las animaciones de desplazamiento.
Elementos interactivos:Defina cómo responden los elementos a las interacciones del usuario, como pasar el cursor o hacer clic.
Diseño de movimiento:crea secuencias de movimiento complejas para los elementos de la interfaz de usuario.

de aceleración populares

Ease (default)

Comienza lentamente, acelera rápidamente y luego vuelve a reducir la velocidad.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Velocidad constante de principio a fin.

cubic-bezier(0, 0, 1, 1)

Ease-in

Comienza lento y luego acelera.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Arranca rápido y luego desacelera.

cubic-bezier(0, 0, 0.58, 1)

Consejos para crear curvas personalizadas Mantenga los

valores x entre 0 y 1:Losvalores fuera de este rango pueden provocar un comportamiento inesperado.
Visualizar la curva:Utilice el gráfico interactivo para comprender cómo afectan los cambios a la animación.
Pruebe con elementos reales:siempre obtenga una vista previa de su curva con componentes de interfaz de usuario reales para asegurarse de que se sienta bien.
Guarde ajustes preestablecidos:marque curvas útiles para proyectos futuros.