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.

Elysia Tools

Mobile Navigation

Design

CSS-Easing- und Animations-Visualisierer

Visualisiert eine CSS-cubic-bezier-Easing-Kurve, zeigt Vorschau auf Position/Deckkraft/Skalierung, wählt Presets und exportiert CSS

Einzelheiten

Wobei dieses Tool hilft

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.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

1 Beispiele

Eine knackige ease-out-back-Kurve für einen Button

ease-out-back-Kurve mit Überschwingen, Vorschau und CSS.

<div>Easing curve + live preview + copy-ready CSS.</div>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

4 Optionen

InhaltHaupteingaben einfügen oder eingeben.1

Easing-EingabetextOptionales Feld

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.3

VoreinstellungselectOptionales FeldDauer (ms)numberOptionales FeldVerzögerung (ms)numberOptionales Feld

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

CSS-Easing- und Animations-Visualisierer

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Elastischer Button-Hover-Effekt

2. Sanftes Einblenden eines Overlays

FAQ

Bulma CSS Framework Beispiele

Milligram CSS Framework Beispiele

Tailwind CSS Samples

Web Python Bildverarbeitung Beispiele

Farbraumkonverter

CMYK-Farbkonverter

OKLCH-Farbkonverter

CSS-Animation-Generator

CSS-Authoring-, Layout- und Cascade-Workflow-Tools

Farbraum-Konvertierung fur Web und Druck

Generatoren fur CSS-Effekte, Paletten und Design-Tokens

Tools fuer Web-Accessibility-Audits und lesbare Farbpruefung