Catégorie: Développement
Générateur de courbe cubic-bezier
Créez une courbe d'accélération CSS personnalisée
Faites glisser deux points de contrôle pour façonner une fonction cubic-bezier(), observez la courbe et un aperçu animé se mettre à jour en direct, et copiez la déclaration animation-timing-function finale. La courbe est calculée dans votre navigateur.
Progression à 50 % de la durée: 0.802
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
L'accélération d'une transition ou animation CSS est une courbe de Bézier cubique allant de (0,0) à (1,1) : les deux points intermédiaires décident si le mouvement démarre lentement puis accélère, dépasse sa cible, ou autre chose encore. Les mots-clés nommés (ease, ease-in-out, etc.) ne sont que cinq points fixes dans cet espace. Cet outil trace la courbe à partir des deux points de contrôle que vous réglez, montre une boîte se déplaçant avec cette fonction d'accélération exacte, et indique jusqu'où la progression accélérée en est arrivée à mi-parcours, le chiffre le plus difficile à imaginer rien qu'en regardant la courbe.
Mode d'emploi
- Partez d'un préréglage ou réglez directement les deux points de contrôle.
- Observez la courbe et l'aperçu animé se mettre à jour.
- Copiez la déclaration cubic-bezier() dans votre transition ou animation.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Quelque chose est-il calculé sur un serveur ?
- Non. La courbe, l'aperçu animé et le chiffre de progression sont tous calculés par le JavaScript qui s'exécute dans la page.
- Pourquoi les deux valeurs X sont-elles limitées entre 0 et 1 ?
- X représente le temps écoulé, que la spécification CSS exige de voir avancer de 0 à 1 pour que la courbe reste une fonction valide du temps. Y est la progression accélérée et peut descendre sous 0 ou dépasser 1, ce qui permet de créer un dépassement ou un rebond.
- Que signifie le chiffre à mi-parcours ?
- C'est la progression accélérée, et non la progression linéaire, au moment où exactement la moitié de la durée de l'animation s'est écoulée. Une valeur supérieure à 50 % à cet instant signifie que le mouvement est déjà en avance sur un rythme linéaire à mi-parcours.