Función CSS cubic-bezier()

CSS 函数Funciones CSS

Ejemplo

Efectos de transición a diferentes velocidades de principio a fin:

div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); }

Pruébalo »

Definición y uso

La función cubic-bezier() define una curva Bézier cúbica (Cubic Bezier).

La curva Bézier se define por cuatro puntos P0, P1, P2 y P3. P0 y P3 son el punto inicial y el punto final de la curva. P0 es (0,0) y representa el tiempo inicial y el estado inicial; P3 es (1,1) y representa el tiempo final y el estado final.

De la figura anterior, lo que necesitamos saber es el rango de valores de cubic-bezier:

P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)

Lo que debemos tener en cuenta son los valores de los puntos P1 y P2. El rango de valores del eje X es de 0 a 1; si el valor excede este rango, cubic-bezier no funcionará. No hay una restricción para el eje Y, pero tampoco es necesario que sea demasiado grande.

La comprensión más directa es: colocar una línea recta en un eje de coordenadas con un rango de solo 1, y sacar dos puntos del medio para tirar de ella (el intervalo de valores del eje X es [0, 1], el eje Y es arbitrario). La curva resultante es la curva de velocidad de la animación.

cubic-bezier() se puede usar en laanimation-timing-functionytransition-timing-functionpropiedad

Versión compatible: CSS3

Soporte del navegador

Los números en la tabla indican la primera versión del navegador que admite la función.

Función
cubic-bezier() 4.0 10.0 4.0 3.1 10.5

Sintaxis CSS

cubic-bezier(x1,y1,x2,y2)
Valor Descripción
x1,y1,x2,y2 Requerido. Valores numéricos; x1 y x2 deben ser números entre 0 y 1.

CSS 函数Funciones CSS

Otras extensiones