CSS - 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: Fonction non linéaire définissant la progression d'une animation.transition-timing-function: Fonction définissant une transition non linéaire.
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 :
x1est la valeur de l'abscisse du pointP1.y1est la valeur de l'ordonnée du pointP1.x2est la valeur de l'abscisse du pointP2.y2est la valeur de l'ordonnée du pointP2.
Les valeurs
x1etx2doivent être comprises entre 0 et 1.Par contre, les valeurs
y1ety2peuvent 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.
Valeurs prédéfinies : linear - ease - ease-in - ease-out - ease-in-out
Commentaires
Enregistrer un commentaire