Générateur CSS Easing
Éditeur de Courbe de Bézier
Aperçu de l'Animation
Effets d'Accélération Courants
Générateur CSS easing en ligne gratuit. Faites glisser les points de contrôle pour créer des courbes cubic-bezier. Préréglages intégrés pour ease, ease-in, ease-out, ease-in-out et linear. Aperçu d'animation en temps réel.
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.