`Cubic-bezier()` - Fonction CSS

cubic-bezier()

Résumé des caractéristiques de la fonction `cubic-bezier()`

Description rapide

Détermine, à partir de 4 paramètres, une progression non linéaire pour les animations.

Statut

Standard

Pourcentages

Ne s'appliquent pas.

Module W3C

Module CSS - Fonctions d'accélération

Références (W3C)

🡇

🡅

CSS Easing Functions Level 2

Statut du document: WD (document de travail)

CSS Easing Functions Level 1

Statut du document: CR (document candidat à la recommandation)

Description de la fonction `cubic-bezier()`.

La fonction cubic-bezier() permet d'indiquer une progression non linéaire pour les animations et les transitions.

La courbe de Bezier est un outil mathématique qui permet de définir une courbe avec seulement 4 valeurs numériques.

Cubic Bezier

Les points P0 et P0' sont fixes et délimitent un carré. Ils marquent le point de départ et le point d'arrivée de la courbe.
P1 et P2 définissent la tangente de la courbe au départ et à la fin. En général, la courbe ne passe pas par P1 et P2, sauf s'il s'agit d'une droite.

La position des points P1 et P2 est définie par leurs coordonnées sur les axes : x1 et y1 pour P1, x2 et y2 pour P2. Ce sont ces 4 valeurs qui sont les paramètres de la fonction cubic-bezier().

Les abscisses x1 et x2 sont deux nombres compris entre 0 et 1. Les ordonnées y1 et y2 peuvent être négatifs ou supérieurs à 1.


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

Vous trouverez derrière ce lien un outil pratique pour définir les paramètres de la fonction cubic-bezier().

La valeur `cubic-bezier()` peut être utilisée avec les propriétés suivantes :

animation-timing-function : Définit la fonction d'accélération à utiliser pendant une animation.
transition-timing-function : Propriété définissant la fonction d'accélération à utiliser pendant une transition.

Syntaxes de la fonction `cubic-bezier()`.

animation-timing-function: cubic-bezier(0.15, 1.05, 0.67, 0.5); x1 y1 x2 y2

Les quatre paramètres sont des valeurs numériques sans unité. Ils sont définis conformément au schéma ci-après :
1. x1 est la valeur de l'abscisse du point P1.
2. y1 est la valeur de l'ordonnée du point P1.
3. x2 est la valeur de l'abscisse du point P2.
4. y2 est la valeur de l'ordonnée du point P2.
Les valeurs x1 et x2 doivent être comprises entre 0 et 1.

Par contre, les valeurs y1 et y2 peuvent dépasser 1 ou être négatives, ce qui provoque un effet de rebond, en fin de parcours pour les valeurs supérieures à 1, ou en début de parcours pour les valeurs négatives.

Simulateur avec la fonction `cubic-bezier()`.

Le simulateur permet de comparer les fonctions d'accélération classiques (ease-in, ease-out, etc.) avec un déplacement régulier linéaire (le bloc vert).

transition-timing-function :

cubic-bezier( 0.5 , 0.5 , 0.5 , 0.5 ) /* linear */

cubic-bezier( 0.25 , 0.1 , 0.25 , 1 ) /* ease */

cubic-bezier( 0.42 , 0 , 1 , 1 ) /* ease-in */

cubic-bezier( 0 , 0 , 0.58 , 1 ) /* ease-out */

cubic-bezier( 0.42 , 0 , 0.58 , 1 ) /* ease-in-out */

linear

Support de la fonction `cubic-bezier()`.

Transitions et animations sont bien gérées par tous les navigateurs actuels. Il en est de même pour la fonction cubic-bezier().

Colonne 1

Capacité de prendre en charge de façon générale les animations en CSS.

Colonne 2

Prise en charge générale des transitions.

Colonne 3

Support de la fonction cubic-bezier() pour définir des progressions non linéaires (animations et transitions).

Support des
animations

Support des
transitions

Fonction
cubic-bezier()

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `cubic-bezier()`.

Module CSS - Fonctions d'accélération - Niveau 1

Introduction des fonctions d'accélération pour les animations et les transitions.
Définition de la fonction cubic-bezier().

21 Février 2017
Document de travail.
30 Avril 2019
Candidat à la recommandation.
Module CSS - Fonctions d'accélération - Niveau 2

Pas de modification concernant la fonction cubic-bezier().

29 Août 2024
Document de travail.

Voir aussi, concernant les fonctions d'accélération.

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction cubic-bezier() est décrite dans le module "Module CSS - Fonctions d'accélération" (CSS Easing Functions).

Fonctions :

Cubic-bezier()

Détermine, à partir de 4 paramètres, une progression non linéaire pour les animations.

linear()

Définit une fonction d'accélération linéaire, utilisable pour les animations avec animation-timing-function.

steps()

Il s'agit d'une fonction d'accélération, qui définit une progression saccadée, pas par pas.

Cubic-bezier() - Fonction CSS

Résumé des caractéristiques de la fonction cubic-bezier()

Description de la fonction cubic-bezier().

La valeur cubic-bezier() peut être utilisée avec les propriétés suivantes :

Syntaxes de la fonction cubic-bezier().

Simulateur avec la fonction cubic-bezier().

Support de la fonction cubic-bezier().