La propriété transition-timing-function spécifie la courbe de vitesse d’un effet de transition. Elle détermine la rapidité avec laquelle une animation commence et s’arrête, ainsi que le rythme de sa progression.

transition-timing-function: time_function;

Il existe des mots-clés essentiels qui décrivent les différents time_functions :

• ease – Valeur par défaut. Un effet de transition avec un début lent, puis rapide, puis une fin lente ;
• linear – Vitesse constante tout au long de la transition ;
• ease-in – Un effet de transition avec un début lent ;
• ease-out – Un effet de transition avec une fin lente ;
• ease-in-out – Un effet de transition avec un début et une fin lents, et un milieu rapide.

Exécutons l’exemple suivant pour observer la différence entre eux. La transition s’appliquera uniquement lors du survol du container.

Courbe de Bézier cubique

Nous pouvons également utiliser la fonction cubic-bezier() pour créer une timing-function personnalisée. Cette fonction prend quatre valeurs représentant les points de contrôle d'une courbe de Bézier cubique, ce qui détermine la forme de la fonction de synchronisation.

Remarque

Pas d'inquiétude. Il n'est pas nécessaire de posséder des connaissances en mathématiques pour générer la fonction cubic-bezier comme valeur de propriété CSS. Nous pouvons utiliser la source https://cubic-bezier.com/ pour générer nos fonctions personnalisées.

Prenons l'exemple suivant pour voir à quel point il est facile à utiliser. La fonction cubic-bezier a été générée en déplaçant les points sur cette source.

En conséquence, nous pouvons copier la fonction en haut dans notre fichier css.