Générateur cubic-bezier CSS

Créez une courbe cubic-bezier personnalisée pour vos transitions et animations CSS.

Rapide

Résultats instantanés

100% privé

Aucune donnée envoyée

Gratuit

Sans inscription

Réglez les quatre paramètres d’une fonction cubic-bezier et testez le mouvement.
Cliquez sur Mettre à jour pour tester
Le code apparaîtra ici.

🔒 Génération locale.

Comment utiliser cubic-bezier en CSS ?

La fonction cubic-bezier(x1,y1,x2,y2) définit la progression temporelle d’une transition entre son début et sa fin.

x1 / y1
Premier point de contrôle.
P1
0.25,0.1.
x2 / y2
Second point de contrôle.
P2
0.25,1.
Timing
Utilisez la fonction dans transition.
cubic-bezier(...)
ease personnalisée.
Test
L’aperçu montre le ressenti.
transition-timing-function
Déplacement.

Comment utiliser cubic-bezier en CSS ?

La fonction cubic-bezier(x1,y1,x2,y2) définit la progression temporelle d’une transition entre son début et sa fin.

À quoi sert cet outil ?

Créez une courbe cubic-bezier personnalisée pour vos transitions et animations CSS. Réglez les quatre paramètres d’une fonction cubic-bezier et testez le mouvement. Il est conçu pour obtenir, tester ou analyser une structure web directement dans le navigateur, avec un résultat visible qu’il reste possible de relire avant intégration.

x1 / y1

Premier point de contrôle. Formule ou repère : P1. Exemple : 0.25,0.1.

x2 / y2

Second point de contrôle. Formule ou repère : P2. Exemple : 0.25,1.

Timing

Utilisez la fonction dans transition. Formule ou repère : cubic-bezier(…). Exemple : ease personnalisée.

Test

L’aperçu montre le ressenti. Formule ou repère : transition-timing-function. Exemple : Déplacement.

Que représente cubic-bezier ?

Une courbe utilisée pour définir la vitesse d’une animation ou transition.

x1 et x2 doivent-ils être entre 0 et 1 ?

Oui pour une fonction de timing CSS valide.

y1 et y2 peuvent-ils sortir de 0 à 1 ?

Oui, cela peut créer un dépassement.

Puis-je copier la fonction générée ?

Oui.

Bien interpréter le résultat

Lorsque l’outil produit ou analyse du code, une configuration ou une structure technique, vérifiez toujours le résultat dans votre navigateur ou votre projet avant une utilisation en production.

Questions fréquentes sur générateur cubic-bezier css 

Retrouvez ici les réponses aux questions les plus courantes sur l’utilisation de cet outil.

?
Que représente cubic-bezier ?

Une courbe utilisée pour définir la vitesse d’une animation ou transition.

x1 et x2 doivent-ils être entre 0 et 1 ?

Oui pour une fonction de timing CSS valide.

y1 et y2 peuvent-ils sortir de 0 à 1 ?

Oui, cela peut créer un dépassement.

Puis-je copier la fonction générée ?

Oui.

L’aperçu utilise-t-il la fonction ?

Oui.

Les valeurs sont-elles envoyées ?

Non.

Outils similaires

Convertisseur de devises

Convertissez rapidement euros, dollars, livres sterling et autres devises avec le dernier taux de change disponible.

Calculer son âge exact

Entrez votre date de naissance pour calculer votre âge exact en années, mois et jours, votre nombre de jours vécus et le temps restant avant votre prochain anniversaire.

Comparateur visuel de prix unitaire

Comparez deux produits selon leur prix et leur quantité grâce à des barres visuelles de prix unitaire.

Sources et références

No data was found