Visualiseur de fonctions d'assouplissement
Visualisez, comparez et générez des fonctions d'assouplissement CSS avec un éditeur de courbe de Bézier cubique SVG interactif. Faites glisser les deux points de contrôle (P1, P2) sur la courbe pour créer votre propre assouplissement personnalisé - ou choisissez parmi plus de 18 préréglages intégrés, notamment l'aisance, le rebond, l'élastique, le dos et la courbe accentuée de Material Design. Comparez jusqu'à 6 courbes d'accélération côte à côte dans la superposition de comparaison, prévisualisez le mouvement avec un point animé et copiez le CSS prêt pour la production pour les propriétés de transition et d'animation. Tout le traitement s'exécute localement dans votre navigateur - entièrement gratuit, aucune inscription requise.
Control Points
transition: all 0.4s ease;
animation: myAnim 0.4s ease;
À propos des fonctions d'assouplissement CSS
- Les fonctions d'assouplissement CSS contrôlent le taux de changement lors d'une animation ou d'une transition. Au lieu d'une animation ennuyeuse à vitesse constante, l'assouplissement rend le mouvement naturel : accélération, décélération, rebondissement ou dépassement. Le type le plus courant est cubique-bézier(), défini par deux points de contrôle (P1, P2) qui façonnent la courbe du début (0,0) à la fin (1,1).
- L'éditeur SVG interactif vous permet de faire glisser deux points de contrôle sur une grille de coordonnées. L'axe X représente le temps (0 % à 100 % de la durée de l'animation) et l'axe Y représente la progression (0 % à 100 % du changement de propriété). La forme de la courbe entre ces points détermine l’assouplissement : les sections raides signifient un changement rapide, les sections plates signifient un changement lent.
- P1 (première poignée) contrôle l'accélération initiale ; P2 (deuxième poignée) contrôle la décélération finale. P1 en bas à droite crée un démarrage lent qui accélère. P2 en haut à droite crée un démarrage rapide qui ralentit. Les valeurs en dehors de la plage 0-1 (comme y1=-0,5) créent des effets de dépassement comme un rebond ou un rebond.
- L'assouplissement, la durée et le délai sont des propriétés d'animation indépendantes. La durée contrôle la durée d'exécution de l'animation. Le délai contrôle le moment où il démarre. L'assouplissement contrôle le rythme du mouvement pendant cette durée. Une durée rapide avec un assouplissement spectaculaire crée un mouvement vif et vif. Une durée lente avec un léger assouplissement crée des transitions douces et élégantes.
Foire aux questions
Une fonction d'assouplissement CSS définit le taux de changement d'une propriété au fil du temps lors d'une animation ou d'une transition. Au lieu de se déplacer à vitesse constante, l'assouplissement permet à l'animation d'accélérer, de décélérer, de rebondir ou de dépasser. Le type le plus courant est cubique-bézier(), défini par quatre valeurs représentant deux points de contrôle qui façonnent la courbe d'assouplissement.
Une courbe de Bézier cubique a quatre paramètres : x1, y1, x2, y2. P1 (x1, y1) contrôle la façon dont l'animation démarre - il détermine l'accélération initiale. P2 (x2, y2) contrôle la fin de l'animation - il détermine la décélération finale. Les deux points se trouvent sur une grille de coordonnées où X = temps (0 à 1) et Y = progression (0 à 1).
Lorsqu'une valeur du point de contrôle Y passe en dessous de 0 ou au-dessus de 1, la courbe dépasse, ce qui signifie que la propriété animée dépasse temporairement sa valeur finale. Cela crée des effets de rebond et de ressort. Par exemple, Back In commence par reculer légèrement avant d’avancer.
Ease-in démarre lentement et accélère - bon pour les éléments entrant dans l'écran. L'accélération démarre rapidement et décélère - idéal pour les éléments qui quittent l'écran. Ease combine les deux : un début et une fin en douceur avec une section centrale plus rapide.
Utilisez la fonction cubique-bezier() dans votre propriété de transition ou d'animation : transition: opacity 0.3s cubique-bezier(0.25, 0.1, 0.25, 1);. Les quatre valeurs sont x1, y1, x2, y2. Vous pouvez faire glisser les points de contrôle dans cet outil pour trouver la courbe parfaite et copier la valeur CSS résultante.
Pour la plupart des interactions de l'interface utilisateur (états de survol, modaux, info-bulles), une suppression simplifiée est recommandée : les objets qui démarrent rapidement et ralentissent semblent réactifs et naturels. Pour les animations d’entrée, utilisez la facilité d’entrée ou la courbe accentuée de Material Design. Évitez le linéaire pour l'interface utilisateur - cela semble robotique.
Oui. Utilisez des valeurs arbitraires : transition-[cubic-bezier(0.68,-0.55,0.27,1.55)] ou ajoutez des assouplissements personnalisés à votre tailwind.config.js sous theme.extend.transitionTimingFunction.
Oui - cubique-bezier() et les assouplissements de mots clés (facilité, facilité d'entrée, facilité de sortie, facilité d'entrée, linéaire) sont pris en charge dans tous les navigateurs modernes. Steps() est également largement pris en charge sur Chrome, Firefox, Safari et Edge.