Courbes d'animation
Des transitions bien rythmées
Courbe
Faites glisser les deux points du graphique ou saisissez les valeurs. x reste entre 0 et 1 ; y peut en sortir pour un effet de rebond.
Modèles
Animation
Avec la courbe
Linéaire (référence)
Code
Valeur
cubic-bezier(0.25, 0.1, 0.25, 1)
Transition
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
À propos de l'outil
Cet éditeur sert à régler la fonction de temporisation d'une transition ou d'une animation CSS. Vous déplacez les deux points de contrôle d'une courbe de Bézier sur un graphique, ou vous saisissez x1, y1, x2 et y2 au clavier. x reste entre 0 et 1 comme l'exige CSS, tandis que y peut descendre jusqu'à -0,75 ou monter jusqu'à 1,75 pour obtenir un recul ou un rebond.
Onze modèles servent de point de départ : les mots-clés CSS linear, ease, ease-in, ease-out et ease-in-out, plus des courbes cubique, quartique, exponentielle et avec rebond. Une animation compare la courbe à un mouvement linéaire sur 200 ms à 2 s. Vous pouvez aussi coller une valeur existante, puis copier la fonction cubic-bezier ou une ligne transition prête à l'emploi.
Comment l'utiliser
- Choisissez un point de départ dans « Modèles » ou collez une valeur existante dans « Coller une valeur ».
- Faites glisser les points du graphique, ou ajustez « Point de contrôle 1 » et « Point de contrôle 2 » au clavier.
- Choisissez une « Durée » puis cliquez sur « Lire l'animation » pour comparer la courbe au mouvement linéaire de référence.
- Copiez la « Valeur » cubic-bezier ou la ligne « Transition » et collez-la dans votre feuille de style.
Questions fréquentes
Pourquoi x est-il limité entre 0 et 1 ?
En CSS, les abscisses des deux points de contrôle représentent le temps et doivent rester entre 0 et 1, sinon la fonction cubic-bezier est invalide. L'éditeur bloque donc x dans cet intervalle, mais laisse y aller de -0,75 à 1,75.
Comment obtenir un effet de rebond ?
Placez un point de contrôle au-dessus de 1 ou en dessous de 0 sur l'axe vertical : l'élément dépasse sa position finale puis revient. Les modèles « Out avec rebond » et « In-out avec rebond » en donnent des exemples.
Quelles valeurs peut-on coller dans le champ ?
Une fonction cubic-bezier(x1, y1, x2, y2), avec ou sans le nom de la fonction, ou un mot-clé CSS : linear, ease, ease-in, ease-out ou ease-in-out. Si x1 ou x2 sort de l'intervalle 0 à 1, la valeur est refusée avec un message.
Que contient la ligne Transition copiée ?
Une déclaration de la forme transition: transform 600ms cubic-bezier(…);, avec la durée choisie dans l'outil. Elle anime la propriété transform ; remplacez-la par la propriété que vous voulez animer, par exemple opacity.