Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.

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 fonction cubic-bezier() peut être utilisée avec :

Syntaxe de la fonction cubic-bezier().

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

    Les quatre paramètres sont des valeurs numériques sans unité. Ils sont définis conformément au schéma ci-contre :

    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.

transition-timing-function:
( x1 y1 x2 y2 )

Valeurs prédéfinies :   linear   -   ease   -   ease-in   -   ease-out   -   ease-in-out

Voir aussi...

Animation - Propriétés.

Animation - Directives.

Animation - Fonctions.

  • steps() : Définit une animation saccadée, pas par pas.