Fonction

CSS cubic-bezier()

Définition et utilisation de cubic-bezier() La fonction est utilisée pour définir la courbe de cubic-bezier.

La courbe de cubic-bezier est définie par quatre points P0, P1, P2 et P3. Dans CSS, P0 et P3 sont le point de départ et d'arrivée de la courbe, et les coordonnées de ces points sont des ratios fixes. P0 est (0, 0), représentant le temps initial et l'état initial ; P3 est (1, 1), représentant le temps final et l'état final.

cubic-bezier() Les fonctions peuvent être combinées avec animation-timing-function et transition-timing-function Les attributs sont utilisés ensemble.

Exemple

Exemple 1

Un effet de transition de vitesse variable de début à fin :

div {
  largeur: 100px;
  hauteur: 100px;
  fond: rouge;
  transition: largeur 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Essayez-le vous-même

Exemple 2

Affichez des éléments <div> avec différentes valeurs de vitesse de cubic-bezier :

#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);}

Essayez-le vous-même

Syntaxe CSS

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

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Pages associées

Référence :Propriété animation-timing-function CSS

Référence :Propriété transition-timing-function CSS