# Visualiseur d’Easing et d’Animation CSS Visualise une courbe d’easing cubic-bezier CSS, prévisualise sur position/opacité/échelle, choisit des préréglages et exporte le CSS > Page canonique: https://elysiatools.com/fr/tools/css-easing-visualizer - **Catégorie:** Design - **Mots-clés:** easing, cubic-bezier, animation, css, courbe ## Présentation 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. ## Entrées - **Entrée d’easing** (text): cubic-bezier(0.34, 1.56, 0.64, 1) · ease-out · linear - **Préréglage** (select) - **Durée (ms)** (number) - **Délai (ms)** (number) ## 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. ## Fonctionnement - 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. ## Questions fréquentes ### Qu'est-ce qu'une courbe cubic-bezier en CSS ? C'est une fonction de transition définie par quatre points de contrôle qui détermine la vitesse d'une animation au fil du temps. ### Comment fonctionne l'effet de rebond (overshoot) ? Il se produit lorsque les valeurs de contrôle dépassent les limites de 0 ou 1, créant un effet élastique temporaire. ### Puis-je utiliser des préréglages existants ? Oui, l'outil propose des préréglages courants comme linear, ease-in-out, ease-out-back ou snappy. ### Quels types de prévisualisations sont disponibles ? L'outil affiche trois animations en direct basées sur la translation (translateX), l'opacité et l'échelle (scale). ### Comment intégrer le résultat dans mon projet ? Copiez simplement le code CSS généré pour les propriétés transition ou les règles @keyframes et collez-le dans votre code. ## Outils associés - [Convertisseur d'espaces colorimetriques](https://elysiatools.com/fr/tools/color-space-converter): Convertit une couleur entre HEX, RGB, HSL, CIELAB et Display-P3 avec sortie CSS et verification de gamme. - [Convertisseur de couleur CMYK](https://elysiatools.com/fr/tools/cmyk-converter): Convertit les couleurs entre HEX, RGB, HSL et CMYK. - [Convertisseur de Couleur OKLCH](https://elysiatools.com/fr/tools/oklch-color-converter): Conversion bidirectionnelle entre HEX, RGB, HSL, OKLCH et Display-P3 selon CSS Color 4, avec lecture luminosité/chroma/teinte, vérification de gamut sRGB et Display-P3, et suggestion de rognure hors-gamut - [Générateur d'Animation CSS](https://elysiatools.com/fr/tools/animation-generator): Génère des images clés et des propriétés d'animation CSS - [Extracteur de palette depuis URL d’image](https://elysiatools.com/fr/tools/color-palette-extractor-from-image-url): Recupere une URL d’image distante, extrait les couleurs dominantes, exporte des fichiers de palette prets pour le code et affiche les contrastes - [Extracteur de tokens de thème ECharts](https://elysiatools.com/fr/tools/echarts-theme-token-extractor): Extrait des design tokens — couleurs, nombres, tailles de police et chaînes — d'un JSON de thème ECharts et les exporte directement dans votre design system. Collez un objet thème (celui enregistré et passé à echarts.init(dom, themeName)) et l'outil parcourt chaque feuille, étiquetant chaque couleur (avec normalisation optionnelle nommé/rgb → hex), nombre d'espacement, taille de police et chaîne, puis émet des variables CSS propres, un thème.extend Tailwind, un tokens.json Style Dictionary ou des variables SCSS. Pont entre un thème de visualisation ECharts et les tokens de design Figma/CSS/Tailwind sans recopier chaque valeur à la main. - [Générateur de snippets CSS glassmorphism / neumorphisme](https://elysiatools.com/fr/tools/glassmorphism-css-snippet-builder): Génère de bout en bout le snippet CSS glassmorphism ou neumorphisme complet : réglez flou, saturation, opacité de teinte, rayon, bordure, ombre extérieure et reflet supérieur ; en option superposition de grain SVG feTurbulence et repli @supports ; préfixe -webkit-backdrop-filter ajouté automatiquement (requis avant Safari 18) et correspondance des classes Tailwind (avec la note v3/v4), avec aperçu en direct de la carte sur fond dégradé. - [Extracteur de palette couleur depuis image](https://elysiatools.com/fr/tools/image-color-palette-extractor): Charge une image, extrait les couleurs dominantes et exporte des tokens reutilisables avec controle du contraste ## Exemples - [Exemples du Framework CSS Bulma](https://elysiatools.com/fr/samples/bulma): Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS - [Exemples du Framework CSS Milligram](https://elysiatools.com/fr/samples/milligram): Exemples du framework CSS Milligram incluant la typographie, les formulaires, les grilles et les composants - [Exemples Tailwind CSS](https://elysiatools.com/fr/samples/tailwind-css): Exemples Tailwind CSS - Framework CSS utility-first avec design responsive, composants et configurations personnalisées - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format ## Contenu associé - [Création de CSS, mise en page et cascade](https://elysiatools.com/fr/hubs/css-authoring-layout-and-cascade-workflows): Créez et révisez du CSS avec formatage, diagnostic des sélecteurs, extraits responsives, effets visuels et contrôles rendus.