Générateur de courbe cubic-bezier CSS avec aperçu
Générez une courbe d’accélération CSS cubic-bezier (easing) avec aperçu, dans le navigateur.
🔒 100 % côté client — aucune donnée envoyée
Cet outil crée des courbes cubic-bezier pour les easings d'animation CSS, avec un aperçu visuel du mouvement. Ajustez les points de contrôle et copiez la valeur prête à coller dans votre feuille de style. Tout fonctionne à 100 % dans votre navigateur, sans dépendance externe.
À quoi ça sert ?
- ▸ Créer un easing personnalisé pour une transition CSS fluide
- ▸ Reproduire une courbe d'accélération de type « ease-in-out » sur mesure
- ▸ Prévisualiser le mouvement d'une animation avant de l'intégrer
- ▸ Copier une valeur cubic-bezier prête pour une propriété transition
FAQ
Qu'est-ce qu'une fonction cubic-bezier en CSS ?
C'est une fonction d'easing définie par quatre valeurs qui contrôlent la vitesse d'une animation ou transition au fil du temps.
Comment utiliser une valeur cubic-bezier dans mon CSS ?
Copiez la valeur générée et placez-la dans une propriété transition-timing-function ou animation-timing-function, par exemple cubic-bezier(0.25, 0.1, 0.25, 1).
Peut-on créer un effet de rebond avec cubic-bezier ?
Oui, en plaçant les points de contrôle au-delà de l'intervalle 0-1 sur l'axe vertical, la courbe dépasse la cible et produit un effet de rebond.