Fonction de Temps de Transition

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 et le rythme auquel elle progresse.

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

• ease - Valeur par défaut. Un effet de transition avec un début lent, puis rapide, puis se termine lentement ;
• linear - Il a une 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.

Lançons l'exemple suivant pour voir la différence entre eux. La transition fonctionnera uniquement sur le 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, qui détermine la forme de la fonction de timing.

Remarque

Pas de soucis. Nous n'avons pas besoin de connaissances en mathématiques pour générer la fonction de Bézier cubique en tant que valeur de propriété CSS. Nous pouvons utiliser la source cubic-bezier.com pour générer nos fonctions personnalisées.

Considérons 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.