Fonction CSS cubic-bezier()
Exemple
Un effet de transition à vitesse variable 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);
}
Définition et utilisation
La fonction cubic-bezier() définit une courbe de Bézier cubique.
Une courbe de Bézier cubique est définie par quatre points P0, P1, P2 et P3. P0 et P3 sont le début et la fin de la courbe et, en CSS, ces points sont fixes car les coordonnées sont des rapports. P0 est (0, 0) et représente le temps initial et l'état initial, P3 est (1, 1) et représente le temps final et l'état final.
La fonction cubic-bezier() peut être utilisée avec la propriété animation-timing-function et la propriété transition-timing-function .
Version: | CSS3 |
---|
Prise en charge du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend entièrement en charge la fonction.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
Syntaxe CSS
cubic-bezier(x1,y1,x2,y2)
Value | Description |
---|---|
x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |