# CSS-Easing- und Animations-Visualisierer Visualisiert eine CSS-cubic-bezier-Easing-Kurve, zeigt Vorschau auf Position/Deckkraft/Skalierung, wählt Presets und exportiert CSS > Kanonische Seite: https://elysiatools.com/de/tools/css-easing-visualizer - **Kategorie:** Design - **Schlagwörter:** easing, cubic-bezier, animation, css, kurve ## Überblick Stimme das Timing von CSS-Animationen ab, indem du Easing-Kurve und Live-Vorschau gleichzeitig siehst. Eingaben: - Gib ein eigenes cubic-bezier(x1, y1, x2, y2) ein, wähle einen benannten Preset (linear, ease, ease-in/out, ease-in/out-back, ease-in/out-expo, snappy…) oder ein Schlüsselwort. - Stelle Dauer (ms) und Verzögerung (ms) ein. Der Bericht zeigt: - Die Easing-Kurve (Fortschritt vs Zeit) als SVG, mit den beiden Bézier-Kontrollpunkten, gegen eine gestrichelte Linear-Referenz. Überschwingende Kurven (y<0 oder y>1, wie ease-out-back) werden markiert, da sie Abprallen erzeugen, aber Layout-Sprünge verursachen können. - Drei Live-Vorschauen — translateX, opacity und scale — animiert mit dem echten CSS-Easing, mit Replay-Button. - Kopierfertiges CSS im `transition`- und `@keyframes`-Format. Der Bézier-Löser nutzt Newton-Raphson mit Bisektions-Rückfall, um Zeit → Fortschritt abzubilden wie Browser es tun. ## Eingaben - **Easing-Eingabe** (text): cubic-bezier(0.34, 1.56, 0.64, 1) · ease-out · linear - **Voreinstellung** (select) - **Dauer (ms)** (number) - **Verzögerung (ms)** (number) ## Wann verwenden - Wenn Sie benutzerdefinierte cubic-bezier-Kurven für UI-Animationen präzise abstimmen und visuell testen möchten. - Wenn Sie das Überschwingen von Kurven wie ease-out-back vor der Implementierung im Browser analysieren wollen. - Wenn Sie fertigen CSS-Code für Übergänge (transition) und Keyframe-Animationen direkt in Ihr Stylesheet kopieren möchten. ## Funktionsweise - Geben Sie eine eigene cubic-bezier-Formel ein oder wählen Sie eine der Voreinstellungen wie ease-out-back oder snappy aus. - Passen Sie die Animationsdauer und die Verzögerung in Millisekunden an, um das zeitliche Verhalten zu steuern. - Analysieren Sie die generierte SVG-Kurve und beobachten Sie die Live-Vorschau der Effekte für Verschiebung, Deckkraft und Skalierung. - Kopieren Sie den automatisch erzeugten CSS-Code für transition oder @keyframes direkt in Ihr Webprojekt. ## Anwendungsfälle - Feinabstimmung von Micro-Interactions wie Button-Hover-Effekten mit elastischem Feedback. - Erstellung von flüssigen Page-Transitions durch exponentielle Easing-Kurven (ease-out-expo). - Optimierung von Lade-Spinner-Animationen durch präzise Kontrolle über die Beschleunigungsphase. ## Häufig gestellte Fragen ### Was zeigt die SVG-Kurve im Visualisierer? Sie zeigt den Animationsfortschritt im Verhältnis zur Zeit sowie die genaue Position der beiden Bézier-Kontrollpunkte. ### Wie verhält sich das Tool bei Werten außerhalb des Standardbereichs? Kurven mit Werten unter 0 oder über 1 (wie ease-out-back) werden als überschwingend markiert, da sie elastische Effekte erzeugen. ### Welche Live-Vorschauen sind verfügbar? Das Tool animiert drei separate Boxen für die CSS-Eigenschaften translateX (Verschiebung), opacity (Deckkraft) und scale (Skalierung). ### Kann ich vordefinierte Easing-Funktionen nutzen? Ja, Sie können aus zahlreichen Presets wie linear, ease-in-out, snappy oder ease-out-expo wählen. ### Wie wird die Kurve berechnet? Ein Bézier-Löser nutzt das Newton-Raphson-Verfahren mit Bisektions-Rückfall, um die Zeit exakt wie moderne Browser auf den Fortschritt abzubilden. ## Ähnliche Tools - [Farbraumkonverter](https://elysiatools.com/de/tools/color-space-converter): Konvertiert Farben zwischen HEX, RGB, HSL, CIELAB und Display-P3 mit CSS-Ausgabe und Gamut-Pruefung. - [CMYK-Farbkonverter](https://elysiatools.com/de/tools/cmyk-converter): Konvertiert Farben zwischen HEX, RGB, HSL und CMYK. - [OKLCH-Farbkonverter](https://elysiatools.com/de/tools/oklch-color-converter): Bidirektionale Umrechnung zwischen HEX, RGB, HSL, OKLCH und Display-P3 nach CSS Color 4, mit Helligkeit-/Chroma-/Farbton-Werten, sRGB- und Display-P3-Gamut-Prüfung und Vorschlag zum Beschneiden außerhalb des Gamuts - [CSS-Animation-Generator](https://elysiatools.com/de/tools/animation-generator): Generiert CSS-Animation-Keyframes und Eigenschaften - [Farbpaletten-Extraktor aus Bild-URL](https://elysiatools.com/de/tools/color-palette-extractor-from-image-url): Laedt eine entfernte Bild-URL, extrahiert dominante Farben, exportiert codefertige Palettendateien und zeigt Kontrastwerte an - [ECharts-Theme-Token-Extraktor](https://elysiatools.com/de/tools/echarts-theme-token-extractor): Extrahiert Design-Tokens — Farben, Zahlen, Schriftgrößen und Strings — aus einem ECharts-Theme-JSON und exportiert sie direkt in Ihr Design-System. Fügen Sie ein Theme-Objekt ein (das per echarts.init(dom, themeName) registriert wird) und das Werkzeug durchläuft jedes Leaf, taggt jede Farbe (optional Named/rgb → hex normalisiert), jeden Abstand, jede Schriftgröße und jeden String und gibt saubere CSS-Variablen, ein Tailwind theme.extend, ein Style Dictionary tokens.json oder SCSS-Variablen aus. Überbrückt die Lücke zwischen einem ECharts-Visualisierungs-Theme und Figma/CSS/Tailwind-Design-Tokens, ohne jeden Wert von Hand zu kopieren. - [Glassmorphism-/Neumorphism-CSS-Snippet-Generator](https://elysiatools.com/de/tools/glassmorphism-css-snippet-builder): Erzeugt den vollständigen Glassmorphism- oder Neumorphism-CSS-Snippet von Anfang bis Ende: Blur, Sättigung, Tönungsdeckkraft, Radius, Rahmen, Außenschatten und Oberkanten-Highlight; optional SVG-feTurbulence-Korn und @supports-Fallback; automatisch mit -webkit-backdrop-filter-Präfix (vor Safari 18 nötig) und Tailwind-Klassen-Mapping (mit v3/v4-Hinweis), plus Live-Vorschau der Karte auf Gradient-Hintergrund. - [Bild-Farbpaletten-Extraktor](https://elysiatools.com/de/tools/image-color-palette-extractor): Laedt ein Bild hoch, extrahiert dominante Farben und exportiert codefertige Tokens mit Kontrastpruefung ## Beispiele - [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster - [Milligram CSS Framework Beispiele](https://elysiatools.com/de/samples/milligram): Milligram CSS-Framework-Beispiele einschließlich Typografie, Formulare, Grids und Komponenten - [Tailwind CSS Beispiele](https://elysiatools.com/de/samples/tailwind-css): Tailwind CSS Beispiele - Utility-first CSS-Framework mit responsivem Design, Komponenten und benutzerdefinierten Konfigurationen - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung ## Verwandte Inhalte - [CSS-Arbeit, Layout und Kaskade](https://elysiatools.com/de/hubs/css-authoring-layout-and-cascade-workflows): Erstellen und prüfen Sie CSS mit Formatierung, Selektor-Diagnose, responsiven Snippets, visuellen Effekten und Render-Checks.