Recomendaciones de cursos:

Función cubic-bezier() de CSS

Definición y uso de CSS cubic-bezier() La función se utiliza para definir la curva cúbica.

La curva cúbica se define por cuatro puntos P0, P1, P2 y P3. En CSS, P0 y P3 son el punto de partida y el punto de llegada de la curva, y las coordenadas de estos puntos son proporciones fijas. P0 es (0, 0), que representa el tiempo y el estado iniciales; P3 es (1, 1), que representa el tiempo y el estado finales.

cubic-bezier() La función puede utilizarse con animation-timing-function Atributos y transition-timing-function Atributos utilizados juntos.

Ejemplo

Ejemplo 1

Un efecto de transición que cambia la velocidad desde el principio hasta el final:

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

Prueba por ti mismo

Ejemplo 2

Muestra los elementos <div> con diferentes valores de velocidad de curva cúbica suave:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Prueba por ti mismo

Sintaxis de CSS

cubic-bezier(x1,y1,x2,y2)

Detalles técnicos

Compatibilidad del navegador

La tabla de números representa la versión del navegador que admite completamente la función por primera vez.

Páginas relacionadas

Referencia:Atributo animation-timing-function de CSS

Referencia:Atributo transition-timing-function de CSS