Convertisseur de couleurs
Convertissez HEX, RGB et HSL avec transparence, visualisez la couleur et copiez les valeurs CSS.
Éditeur de courbe cubic-bezier CSS
Ajustez deux points de contrôle, testez une transition et exportez sa fonction de progression cubic-bezier.
X reste entre 0 et 1 ; Y peut dépasser ces bornes. Utilisez la souris ou les flèches, avec Maj pour un pas plus grand.
CSS
À propos de cet outil
Ajustez l’accélération ou le dépassement d’une transition d’interface.
Mode d’emploi
Choisissez une courbe courante ou déplacez ses points de contrôle. Vous pouvez aussi saisir X1, Y1, X2 et Y2, ou employer les flèches et Maj pour régler les points. Fixez la durée de l’aperçu, lancez la lecture puis arrêtez-la à tout moment. Copiez ou téléchargez le CSS obtenu.
X est limité à 0–1 et Y à −2–3, ce qui permet des mouvements d’anticipation et de dépassement. L’export contient uniquement la déclaration de progression, sans durée ni animation complète. Si votre système demande de réduire les mouvements, la lecture animée est désactivée, mais l’édition et l’export restent disponibles.
Questions fréquentes
L’export contient-il une animation complète ?
Il fournit seulement transition-timing-function. Définissez durée et propriétés animées dans votre CSS. Les valeurs x vont de 0 à 1, les y de −2 à 3.
Pourquoi la lecture n’anime-t-elle rien alors que la courbe est valide ?
L’aperçu respecte le réglage système de réduction des animations. Lorsqu’il est activé, l’animation de déplacement ne se lance pas, mais vous pouvez toujours modifier et exporter la courbe. Sinon, vérifiez que la durée d’aperçu se situe entre 100 et 5 000 ms. Cette durée ne concerne que l’aperçu.
Outils associés
S’ouvre dans un nouvel onglet
Commentaires
0