cosmodev ~/tools/css-animation-playground

Vorgaben

Bewegung

Eigenschaft

Wiederholungen

Timing

Dauer800ms

Verzögerung0ms

Easing

Generiertes CSS

@keyframes cssap-anim {
  from { transform: translateX(0); }
  to { transform: translateX(120px); }
}

.preview {
  animation: cssap-anim 800ms cubic-bezier(0.42,0,0.58,1) 0ms infinite;
}

cosmodev ~/docs/css-animation-playground.md

Was es tut

Der CSS-Animation-Playground lässt dich CSS-Animationen live in deinem Browser entwerfen und betrachten. Wähle eine animierte Eigenschaft (Move, Scale, Fade, Spin), stelle Dauer und Delay ein, wähle eine eingebaute Easing-Kurve — oder forme deine eigene cubic-bezier, indem du die Kontrollpunkt-Griffe ziehst — und kopiere dann das exakte @keyframes- und animation-CSS, um es direkt in dein Projekt einzufügen. Alles läuft clientseitig, nichts, was du justierst, verlässt dein Gerät.

So verwendest du es

Wähle mit dem Segment-Control Property, was animiert wird: Move (translateX), Scale, Fade (opacity) oder Spin (rotate).
Setze Duration (ms) und Delay (ms) mit den Zahlen-Steppern.
Wähle einen Easing-Preset (Linear, Ease, In, Out, In-out) oder wähle Custom, um den Kurven-Editor zu öffnen.
Ziehe im Kurven-Editor die beiden Akzent-Griffe, um die cubic-bezier zu formen. Der blaue Pfad und die Vorschau aktualisieren sich sofort beim Ziehen.
Schalte Iterations zwischen Once und Loop um.
Drücke jederzeit Play, um die Vorschau von vorn abzuspielen, oder Reset, um die Defaults wiederherzustellen.
Kopiere das generierte CSS aus dem Ausgabe-Panel.

Beispiele

Ein flottes Fade (ease-out, 250 ms, einmal)

@keyframes cssap-anim {
  from { opacity: 1; }
  to { opacity: 0.15; }
}

.preview {
  animation: cssap-anim 250ms cubic-bezier(0,0,0.58,1) 0ms 1;
}

Ein eigenes Easing

Setze Easing auf Custom und ziehe dann den ersten Griff Richtung unten links und den zweiten Richtung oben rechts — für ein schnelles Anlaufen mit sanftem Ausklingen. Die generierte cubic-bezier(...) passt sich sofort an — kopiere sie in deine eigene transition- oder animation-Regel.

Gut zu wissen

Eigenes Easing: Ziehe die beiden Akzent-Griffe im Einheitsquadrat, um die Kurve zu formen; der Live-Pfad und die Vorschau folgen deinen Änderungen in Echtzeit.
Copy-paste-fertig: Benenne die cssap-anim-Keyframes und den .preview-Selektor passend zu deinem Markup um — der Rest des CSS ist produktionsbereit.
Privat: das gesamte Tool läuft in deinem Browser — es werden nie Animationsparameter an einen Server gesendet.
Verwandte Tools:
Base64Base64An encoding representing binary data as 64 safe ASCII characters, so it survives transport through text-only channels. It encodes — it does not encrypt.
, JSON Formatter und der Rest des CSS-&-Layout-Sets.