Générateur cubic-bezier : tracez une courbe d'easing, copiez le CSS | We.Inc
Déplacez deux poignées pour tracer une courbe d'easing cubic-bezier(), faites-la courir contre linear et ease, partez des mots-clés de la spécification ou des presets Tailwind, puis copiez le CSS ou une classe Tailwind.
Une courbe d'easing cubic-bezier(x1, y1, x2, y2) va de 0,0 à 1,1 et se courbe grâce à deux points de contrôle. Les deux valeurs x doivent rester entre 0 et 1, sinon le navigateur ignore toute la déclaration, tandis que les valeurs y peuvent descendre sous 0 ou dépasser 1 pour créer un dépassement. Déplacez les poignées ci-dessous et regardez les points faire la course.
Les mots-clés d'easing CSS en valeurs cubic-bezier() (CSS Easing Functions Level 1)
Mot-clé
Valeur cubic-bezier()
Ressenti
cubic-bezier(0, 0, 1, 1)
Vitesse constante, mécanique
ease (la valeur par défaut)
cubic-bezier(0.25, 0.1, 0.25, 1)
Départ rapide, longue arrivée en douceur
cubic-bezier(0.42, 0, 1, 1)
Départ lent, arrêt brusque
cubic-bezier(0, 0, 0.58, 1)
Départ rapide, atterrissage en douceur
cubic-bezier(0.42, 0, 0.58, 1)
Doux aux deux extrémités
Taper quatre nombres en devinant le ressenti fonctionne rarement. Ici, vous façonnez la courbe à la main, voyez les nombres se mettre à jour, et comparez le mouvement côte à côte avec une ligne droite et la valeur par défaut du navigateur avant de coller quoi que ce soit dans votre feuille de style.
Déplacez les poignées bleue et rose sur le graphique, ou tapez des nombres exacts dans les quatre champs. Les champs x sont limités à l'intervalle 0 à 1.
Appuyez sur Lecture pour envoyer trois points sur la piste en même temps : votre courbe, linear et ease.
Choisissez un preset pour partir des mots-clés de la spécification, des valeurs par défaut de Tailwind ou de l'une de nos courbes avec dépassement.
Copiez la déclaration CSS ou la classe arbitraire Tailwind.
Utilisez ease-out pour ce qui entre à l'écran et ease-in pour ce qui en sort. Les éléments qui se déplacent entre deux points visibles sont généralement plus beaux avec ease-in-out.
Un y1 supérieur à 1 fait dépasser la cible au mouvement avant qu'il ne revienne se poser. Gardez un dépassement faible pour les mouvements d'interface, autour de 1.2 à 1.6.
Les durées courtes masquent les différences entre courbes. Jugez une courbe à 600 millisecondes ou plus, puis raccourcissez.
Respectez les personnes qui demandent moins de mouvement : placez les grands déplacements dans @media (prefers-reduced-motion: no-preference).
Questions fréquentes
Que signifient les quatre nombres de cubic-bezier() ?
Ce sont les coordonnées des deux points de contrôle : x1 et y1 pour le premier, x2 et y2 pour le second. L'axe x représente la part de la durée écoulée et l'axe y l'avancement de la valeur animée.
Pourquoi mon cubic-bezier est-il ignoré ?
Si l'une des valeurs x est inférieure à 0 ou supérieure à 1, la fonction est invalide et le navigateur rejette la déclaration, en revenant à la valeur qui s'appliquait avant. Vérifiez que x1 et x2 sont entre 0 et 1.
Les ease-in et ease-out de Tailwind sont-ils identiques aux mots-clés CSS ?
Non. Le thème par défaut de Tailwind définit ease-in comme cubic-bezier(0.4, 0, 1, 1), ease-out comme cubic-bezier(0, 0, 0.2, 1) et ease-in-out comme cubic-bezier(0.4, 0, 0.2, 1), ce qui diffère des mots-clés CSS du même nom. Les deux jeux sont des presets dans l'éditeur pour que vous puissiez les comparer.
Comment utiliser une courbe personnalisée dans Tailwind ?
Écrivez la valeur entre crochets sans espaces, par exemple ease-[cubic-bezier(0.34,1.56,0.64,1)]. Pour la réutiliser, déclarez une variable de thème comme --ease-springy dans @theme et Tailwind crée une classe ease-springy.
Une courbe de Bézier peut-elle faire un rebond en plusieurs sauts ?
Non. Une seule courbe cubique peut dépasser une fois et revenir, mais elle ne peut pas rebondir plusieurs fois. Pour un rebond en plusieurs sauts, utilisez @keyframes avec plusieurs étapes ou la fonction plus récente linear(), qui accepte une liste de points.
Lire le graphique
Le temps avance de gauche à droite et la progression de bas en haut. Une partie raide de la courbe signifie un mouvement rapide, une partie plate signifie que l'élément bouge à peine. La ligne d'un coin à l'autre correspond à un mouvement linéaire.
Des poignées au-dessus du bord supérieur ou sous le bord inférieur poussent la progression au-delà de 100 pour cent ou sous 0 pour cent pendant un instant. C'est ainsi qu'on obtient un léger dépassement sans écrire de keyframes.
Où placer la courbe en CSS
La même valeur fonctionne dans transition-timing-function, animation-timing-function et les raccourcis transition et animation. Dans @keyframes, une timing function définie sur une keyframe ne s'applique qu'au segment jusqu'à la keyframe suivante.
Certaines propriétés ne peuvent pas descendre sous zéro, comme opacity ou une largeur. Si une courbe passe sous 0, ces valeurs sont bornées, et le creux n'est tout simplement pas visible.
Valeurs des presets
Les cinq premiers viennent de la spécification CSS Easing Functions. Les lignes Tailwind correspondent au thème par défaut de ce framework. Les lignes avec dépassement sont des points de départ que nous avons réglés à l'œil.
Tous les presets de l'éditeur
Nom
Source
Valeur
Mot-clé CSS
cubic-bezier(0, 0, 1, 1)
Mot-clé CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
Mot-clé CSS
cubic-bezier(0.42, 0, 1, 1)
Mot-clé CSS
cubic-bezier(0, 0, 0.58, 1)
Mot-clé CSS
cubic-bezier(0.42, 0, 0.58, 1)
ease-in (Tailwind)
Défaut Tailwind
cubic-bezier(0.4, 0, 1, 1)
ease-out (Tailwind)
Défaut Tailwind
cubic-bezier(0, 0, 0.2, 1)
ease-in-out (Tailwind)
Défaut Tailwind
cubic-bezier(0.4, 0, 0.2, 1)
sortie élastique
Dépassement
cubic-bezier(0.34, 1.56, 0.64, 1)
Dépassement
cubic-bezier(0.6, -0.4, 0.4, 1.4)
Dépassement
cubic-bezier(0.2, 0.9, 0.3, 1.1)
Utiliser une courbe personnalisée
Carte au survol avec dépassement
Survolez la carte. Elle monte légèrement au-delà de sa position de repos puis se stabilise, uniquement grâce à la timing function.
Tailwind : classe ponctuelle et token de thème réutilisable
La forme entre crochets ne doit pas contenir d'espaces. La variable @theme transforme la courbe en classe nommée.
Éditeur de courbe d'easing
Déplacez les poignées ou tapez des valeurs, appuyez sur Lecture pour faire courir votre courbe contre linear et ease, puis copiez le CSS ou la classe Tailwind.
Mot-clé CSS
Mot-clé CSS
Mot-clé CSS
Mot-clé CSS
Mot-clé CSS
Défaut Tailwind
Défaut Tailwind
Défaut Tailwind
Dépassement
Dépassement
Dépassement
Graphique de la courbe d'easing. Déplacez les deux poignées pour modifier la courbe.
Premier point de contrôle
Second point de contrôle
Presets d'easing
Durée : {n} ms
Lecture
Votre courbe
Copier le CSS
Copier la classe Tailwind
Cette courbe équivaut au mot-clé CSS {v}.
Les valeurs x restent entre 0 et 1. Les valeurs y peuvent dépasser.