Éditeur de courbes cubic Bezier CSS
Prévisualise des courbes d'accélération et exporte des fonctions de temporisation.
Comment utiliser Éditeur de courbes cubic Bezier CSS
CSS cubic Bezier editor builds a cubic-bezier() timing function from two control points and animates a ball with it so you can see the easing. The x values range from 0 to 1, the y values from -3 to 3 for overshoot or anticipation, and the preview duration from 0.1 to 10 seconds. Download the result as a transition-timing-function rule in easing.css.
- Saisissez les valeurs demandées dans le panneau des paramètres.
- Ajustez les paramètres de base, puis ouvrez le mode avancé pour les options d'export et de réglage fin. Vos paramètres personnalisés restent actifs une fois le panneau fermé.
- Lancez l'éditeur de courbes cubic Bezier CSS, vérifiez le résultat, puis utilisez les commandes de copie ou de téléchargement disponibles.
Ce que cet outil prend en charge
Prévisualise des courbes d'accélération et exporte des fonctions de temporisation.
- Contrôle x1
- Range: 0 to 1
- Contrôle y1
- Range: -3 to 3
- Contrôle x2
- Range: 0 to 1
- Contrôle y2
- Range: -3 to 3
- Durée d'aperçu (secondes)
- Range: 0.1 to 10
Limites et traitement
Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.
Questions fréquentes
Why are the x values limited to 0 to 1 in cubic-bezier?
CSS requires both x coordinates to stay between 0 and 1 so time always moves forward; values outside that range make the function invalid. The y values can go beyond that range, and this editor accepts -3 to 3.
How do I make a bounce or overshoot easing curve?
Set y2 above 1, for example 1.5, so the motion passes the end point before settling, or set y1 below 0 to pull back before starting. The ball preview loops back and forth so you can judge the effect.
Does the easing preview respect reduced motion settings?
Yes. When your system requests reduced motion, the preview animation is turned off. The cubic-bezier value is still generated and downloadable; change the setting temporarily if you need to watch the curve in motion.
Où ma saisie est-elle traitée ?
Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.
Quelles sont les limites de saisie ?
Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.