Visualiseur d’Easing et d’Animation CSS

Réglez le minutage des animations CSS en voyant la courbe d’easing et un aperçu en direct simultanément.

Entrées :

Saisissez un cubic-bezier(x1, y1, x2, y2) personnalisé, choisissez un préréglage nommé (linear, ease, ease-in/out, ease-in/out-back, ease-in/out-expo, snappy…) ou un mot-clé.
Réglez durée (ms) et délai (ms).

Le rapport affiche :

La courbe d’easing (progression vs temps) en SVG, avec les deux points de contrôle Bézier, sur une référence linéaire en pointillés. Les courbes en dépassement (y<0 ou y>1, comme ease-out-back) sont signalées car elles produisent un rebond mais peuvent causer des sauts de mise en page.
Trois aperçus en direct — translateX, opacity et scale — animés avec le easing CSS réel, avec un bouton de relecture.
CSS prêt à copier aux formats transition et @keyframes.

Le solveur Bézier utilise Newton-Raphson avec repli par bissection pour mapper temps → progression comme les navigateurs.

Points clés

Catégorie: Design et couleur
Types d’entrée: text, select, number
Type de sortie: html
Couverture des échantillons: 4
API disponible: Yes

Vue d’ensemble

Ce visualiseur d'easing et d'animation CSS vous permet de concevoir, tester et exporter des courbes de transition personnalisées ou prédéfinies. Visualisez instantanément la courbe de progression en SVG et observez le comportement physique de vos animations sur la position, l'opacité et l'échelle avant de copier le code CSS généré.

Quand l’utiliser

•Lors de la création de transitions CSS personnalisées nécessitant un contrôle précis du timing au-delà des options standards.
•Pour tester l'effet visuel d'un effet de rebond sur des propriétés comme la position ou l'échelle.
•Pour générer rapidement le code CSS de transition ou de keyframes correspondant à une courbe d'animation spécifique.

Comment ça marche

•Saisissez une formule cubic-bezier personnalisée ou sélectionnez l'un des préréglages disponibles comme ease-out-back ou snappy.
•Ajustez la durée et le délai de l'animation en millisecondes pour affiner le comportement temporel.
•Analysez la courbe SVG générée et observez les trois aperçus en direct simulant les changements de position, d'opacité et d'échelle.
•Copiez le code CSS généré sous forme de propriété transition ou de règle @keyframes directement dans votre feuille de style.

Cas d’usage

Conception d'animations d'interface utilisateur fluides pour des boutons ou des menus déroulants.

Création d'effets de rebond dynamiques pour des fenêtres modales ou des popups.

Optimisation du timing des transitions d'état pour améliorer l'expérience utilisateur globale.

Exemples

1. Animation de rebond pour bouton d'action

Intégrateur Web

Contexte: Un intégrateur souhaite ajouter un effet de rebond dynamique lors du survol d'un bouton d'appel à l'action.
Problème: Trouver les bonnes coordonnées cubic-bezier pour un effet de rebond fluide sans saccades visuelles.
Comment l’utiliser: Sélectionnez le préréglage 'ease-out-back' ou saisissez 'cubic-bezier(0.34, 1.56, 0.64, 1)', réglez la durée sur 600 ms, puis observez l'aperçu de translation.
Configuration d’exemple: easing: cubic-bezier(0.34, 1.56, 0.64, 1), preset: ease-out-back, duration: 600, delay: 0
Résultat: La courbe SVG affiche le dépassement et l'aperçu montre un rebond fluide. Le code CSS de transition est prêt à être copié.

2. Transition d'apparition en fondu rapide

Designer UI

Contexte: Un designer souhaite créer une transition d'opacité très réactive pour l'affichage d'une boîte de dialogue.
Problème: Définir une courbe d'accélération rapide au départ puis progressive à la fin.
Comment l’utiliser: Saisissez 'cubic-bezier(0.16, 1, 0.3, 1)' ou choisissez le préréglage 'ease-out-expo', puis réglez la durée sur 400 ms.
Configuration d’exemple: easing: cubic-bezier(0.16, 1, 0.3, 1), preset: ease-out-expo, duration: 400, delay: 0
Résultat: L'aperçu d'opacité montre une apparition immédiate mais douce, et le code CSS généré est copié pour la classe de la modale.