Puntos de control Ajustes

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

preestablecidos

Salida CSS Visualización

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

Preview

Duration: 500ms

curva Bézier cúbica

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

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

  1. valores x entre 0 y 1:Losvalores fuera de este rango pueden provocar un comportamiento inesperado.
  2. Visualizar la curva:Utilice el gráfico interactivo para comprender cómo afectan los cambios a la animación.
  3. 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.
  4. Guarde ajustes preestablecidos:marque curvas útiles para proyectos futuros.

Related Tools

Generador de transiciones CSS3

Transición de opacidad suave

Crea hermosos degradados CSS sin esfuerzo

Genera impresionantes degradados lineales, radiales y cónicos con nuestra interfaz intuitiva. Copia el código CSS y utilízalo en tus proyectos al instante.

Convertidor de Less a CSS

Transforme su código Less en CSS. Rápido, fácil y seguro.

Minificador HTML

Comprima y optimice su código HTML con precisión profesional.

Convertidor de Less a CSS

Transforme su código Less en CSS. Rápido, fácil y seguro.

De binario a hexadecimal

Convierte código binario a hexadecimal sin esfuerzo