Courbe d’accélération CSS façon rebond
Créez une fonction de timing CSS cubic-bezier() personnalisée en déplaçant deux points de contrôle, prévisualisez-la en direct par rapport à une référence linéaire, puis copiez la valeur prête à l’emploi.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
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 à dépassement que certaines bibliothèques d’accélération appellent easeOutBack. Le y1 négatif et le y2 supérieur à 1 sont précisément la raison pour laquelle l’aperçu d’animation ci-dessous recule au-delà de son point de départ et au-delà de son point d’arrivée avant de se stabiliser ; déplacez l’une des poignées ou modifiez les nombres pour rendre l’effet plus fort ou plus doux.
Soyons honnêtes sur ce dont il s’agit : une seule courbe cubic-bezier() n’a que deux points de contrôle, elle peut donc approximer un seul mouvement de dépassement et de stabilisation, pas un véritable rebond physique avec plusieurs rebonds décroissants. Pour un effet de balle qui rebondit littéralement, il faudrait plusieurs keyframes ou segments steps() enchaînés — cette courbe est ce qu’une simple transition-timing-function peut faire de plus proche en une seule ligne.
Ce dépassement unique est pourtant exactement ce que souhaitent la plupart des interfaces dynamiques : un bouton qui dépasse légèrement de sa taille au repos, une fenêtre modale qui rebondit avant de se stabiliser, une carte qui se déploie avec ressort. Copiez la valeur telle quelle pour ce rendu nerveux, ou adoucissez y1 vers 0 et y2 vers 1 pour atténuer le dépassement.