Générateur d'Easing CSS
Éditeur de Courbe de Bézier
Aperçu de l'Animation
Effets d'Accélération Courants
Générateur d'easing CSS gratuit. Faites glisser des points de contrôle pour créer des courbes cubic-bezier avec préréglages et aperçu en direct. 100% privé — fonctionne dans votre navigateur.
Comment utiliser l'accélération CSS
Choisir une fonction d'accélération
Sélectionnez parmi les fonctions d'accélération prédéfinies comme ease-in, ease-out ou créez un cubic-bezier personnalisé.
Ajuster les paramètres
Affinez la courbe d'accélération en ajustant les points de contrôle.
Copier le CSS
Copiez le code CSS généré pour l'utiliser dans vos projets.
Conseils et Astuces
Faire glisser les points de contrôle
Faites glisser directement les deux points de contrôle (P1, P2) sur la courbe pour ajuster la courbe d'accélération en temps réel. L'axe X représente la progression temporelle, l'axe Y le changement de propriété, et la pente de la courbe détermine la variation de vitesse de l'animation.
Aperçu en Direct de l'Animation
Cliquez sur "Lire l'Animation" pour voir comment la balle se déplace le long de la trajectoire de la fonction d'accélération. La barre de progression montre intuitivement la progression temporelle.
Copie en Un Clic CSS
Après réglage, cliquez sur le bouton "Copier" pour copier automatiquement le code CSS cubic-bezier() dans votre presse-papiers, prêt à être collé directement dans votre projet.
Cas d'Utilisation Courants
Animations d'Entrée
ease-out
Animations de Sortie
ease-in
Transitions
ease-in-out
Effets de Survoll
Courbes Personnalisées
Indicateurs de Progression
linear
FAQ
Qu'est-ce que cubic-bezier ?
cubic-bezier est une fonction CSS qui définit la courbe de vitesse d'une animation, décrite par une courbe de Bézier cubique traversant deux points de contrôle : P1 (x1, y1) et P2 (x2, y2). L'axe X de la courbe représente la progression temporelle (0→1) et l'axe Y le changement de propriété (0→1). Une courbe plus raide signifie une vitesse plus rapide ; une courbe plus plate signifie une vitesse plus lente.
Comment utiliser une accélération personnalisée en CSS ?
Utilisez-la directement dans les propriétés CSS transition ou animation : transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. La zone de sortie de code du générateur produit automatiquement le code CSS correct. Cliquez sur copier pour le coller et l'utiliser directement.
Quelles sont les plages valides pour X et Y ?
CSS cubic-bezier() exige que les valeurs X soient comprises entre 0 et 1 (correspondant au temps du début à la fin), et les valeurs Y sont généralement comprises entre 0 et 1 mais peuvent dépasser cette plage (pour créer des effets de rebond). Cet outil limite X à [0, 1] et Y à [0, 1] pour garantir que les courbes générées sont des fonctions d'accélération CSS valides.
Quelle est la différence entre les accélérations prédéfinies ?
ease : Rapide puis lent puis rapide, adapté aux transitions générales.
ease-in : Lent à rapide, adapté aux animations de sortie (éléments quittant).
ease-out : Rapide à lent, adapté aux animations d'entrée (éléments entrant), l'accélération la plus couramment utilisée.
ease-in-out : Lent aux deux extrémités, rapide au milieu, plus lisse que ease.
linear : Vitesse constante, adapté aux animations qui n'ont pas besoin d'accélération.