Courbe d'assouplissement CSS de style rebond
Concevez une fonction de synchronisation CSS cubique-bezier() personnalisée en faisant glisser deux points de contrôle, prévisualisez-la en direct par rapport à une référence linéaire, puis copiez la valeur prête.
Résultat
Cette page ouvre le générateur avec x1=0,68, y1=-0,55, x2=0,265, y2=1,55 déjà chargés — une courbe de dépassement que certaines bibliothèques d'assouplissement qualifient d'easyOutBack. Le y1 négatif et le y2 au-dessus de 1 sont exactement la raison pour laquelle l'aperçu de l'animation ci-dessous recule au-delà de son début et de sa fin avant de se stabiliser ; faites glisser la poignée ou modifiez les chiffres pour rendre l'effet plus fort ou plus doux.
Pour être honnête sur ce que c'est : une seule courbe de bézier cubique () n'a que deux points de contrôle, elle peut donc se rapprocher d'un mouvement de dépassement et de stabilisation, et non d'un véritable rebond physique à plusieurs rebonds avec plusieurs sauts décroissants. Pour un effet de rebond de balle littéral, vous auriez besoin de plusieurs images clés ou segments steps() enchaînés ensemble - cette courbe est la plus proche qu'une simple fonction de synchronisation de transition puisse obtenir sur une seule ligne.
Ce dépassement unique est toujours exactement ce que souhaite la plupart des interfaces utilisateur rebondissantes : un bouton qui dépasse légèrement sa taille de repos, un modal qui dépasse avant de se stabiliser, une carte qui se met en place. Copiez la valeur telle quelle pour cette sensation vive, ou adoucissez y1 vers 0 et y2 vers 1 pour composer le dépassement.