cubic-bezier() - Fonction CSS
Résumé des caractéristiques de la fonction cubic-bezier()
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.
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 fonction cubic-bezier() peut être utilisée avec :
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.
Syntaxe 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-contre :
x1
est la valeur de l'abscisse du pointP1
.y1
est la valeur de l'ordonnée du pointP1
.x2
est la valeur de l'abscisse du pointP2
.y2
est la valeur de l'ordonnée du pointP2
.
Les valeurs
x1
etx2
doivent être comprises entre 0 et 1.Par contre, les valeurs
y1
ety2
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.
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).
linear
Prise en charge par les navigateurs (compatibilité).
Transitions et animations sont bien gérées par tous les navigateurs actuels. Il en est de même pour la fonction cubic-bezier()
.
cubic-bezier()
.
cubic-bezier()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que cubic-bezier()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. cubic-bezier()
fait partie du Module CSS - Fonctions d'accélération (CSS Easing Functions). Les définitions suivantes sont également décrites dans ce même module.