Générateur de Cubic Bezier - Éditeur Visuel de Courbes d'Animation CSS
Générateur de Cubic Bezier
Faites glisser les poignées pour créer une fonction de temporisation CSS
Glissez pour Concevoir
Déplacez les deux poignées du graphique ou saisissez des valeurs exactes pour chaque point de contrôle.
Voyez-la Bouger
Une animation en direct fait tourner votre courbe à côté d'une courbe linéaire pour sentir la différence.
Préréglages Pratiques
Mots-clés CSS et courbes cubic, expo et back populaires qui dépassent et rebondissent.
Privé
Tout s'exécute dans votre navigateur ; rien de ce que vous collez n'est envoyé.
Fonctionnement des Courbes d'Animation
Une fonction de temporisation associe le temps écoulé (axe horizontal) à la progression de l'animation (axe vertical). cubic-bezier(x1, y1, x2, y2) décrit une courbe de (0, 0) à (1, 1) infléchie vers deux points de contrôle. Les valeurs x doivent rester entre 0 et 1 car le temps ne peut pas reculer, mais y peut passer sous 0 ou au-dessus de 1, ce qui fait dépasser l'animation puis revenir, comme avec les préréglages « back ».
Les courbes ease-out (départ rapide, arrêt doux) donnent une impression de réactivité pour ce qui entre à l'écran ; ease-in convient à ce qui sort ; ease-in-out aux éléments qui se déplacent d'un endroit à un autre. Gardez les transitions d'interface courtes, généralement 150 à 400 ms, et respectez les utilisateurs qui demandent moins de mouvement avec la media query prefers-reduced-motion.
Points Clés
- x entre 0 et 1: Le temps n'avance que dans un sens ; y peut dépasser.
- Ease-out pour les entrées: Départ rapide, arrivée douce.
- Moins de mouvement: Respectez prefers-reduced-motion.