Fonction CSS cubic-bezier()

Fonctions CSS

Exemple

Différents effets de transition de vitesse du début à la fin :

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

Essayez-le vous-même »

Définition et utilisation

La fonction cubic-bezier() définit une courbe de Bézier cubique.

La courbe de Bézier est définie par quatre points P0, P1, P2 et P3. P0 et P3 sont les points de début et de fin de la courbe. P0 est (0,0) et représente le temps initial et l'état initial, tandis que P3 est (1,1) et représente le temps final et l'état final.

D'après la figure ci-dessus, ce que nous devons connaître est la plage de valeurs de cubic-bezier :

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

Ce sur quoi nous devons nous concentrer, ce sont les valeurs des points P1 et P2. La plage de valeurs de l'axe X est de 0 à 1 ; lorsque la valeur dépasse cette plage, cubic-bezier devient invalide. Il n'y a pas de plage spécifiée pour les valeurs de l'axe Y, et bien sûr, il n'est pas nécessaire qu'elles soient trop grandes.

La compréhension la plus directe consiste à placer une ligne droite dans un axe de coordonnées dont la plage est seulement de 1, et à prendre deux points au milieu pour la tirer (la plage de valeurs de l'axe X est [0, 1], tandis que l'axe Y est arbitraire). La courbe résultante est la courbe de vitesse de l'animation.

cubic-bezier() peut être utilisé pouranimation-timing-functionettransition-timing-functionPropriété.

Version prise en charge : CSS3

Prise en charge des navigateurs

Les nombres dans le tableau indiquent le premier numéro de version de navigateur qui prend en charge cette fonction.

Fonction
cubic-bezier() 4.0 10.0 4.0 3.1 10.5

Syntaxe CSS

cubic-bezier(x1,y1,x2,y2)
Valeur Description
x1,y1,x2,y2 Obligatoire. Valeurs numériques. x1 et x2 doivent être des nombres compris entre 0 et 1.

Fonctions CSS

autres extensions