Zum Inhalt springen
TextArray1.87.0
100% lokal

CSS-Keyframes-Generator

Wandeln Sie percent;property:value-Schritte in einen @keyframes-Block und die zugehörige Animation-Kurzform um.

Eingabe
Ausgabe
Verwandte Tools
CSS-Farbverlauf-GeneratorEntwickler-Tools
CSS box-shadow-GeneratorEntwickler-Tools
CSS Grid GeneratorEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
CSS-Keyframes-Generator
Geben Sie Keyframe-Schritte als percent;property:value ein — eine Zeile pro Stop, z. B. 0;opacity:0 gefolgt von 100;opacity:1 — und dieses Tool montiert einen kompletten @keyframes-Block zusammen mit der entsprechenden Animation-Kurzform-Deklaration. Fügen Sie auf derselben Zeile mehrere property:value-Paare hinzu, getrennt durch Semikola, um mehr als eine Eigenschaft bei diesem Stop zu animieren, und verwenden Sie einen Prozentsatz auf mehreren Zeilen, um weiterhin Eigenschaften hinzuzufügen.
Wählen Sie eine Voreinstellung — fade, gleiten, puls, schütteln oder sprung — um Schritte von Hand zu überspringen und eine vorgefertigte Animation mit allen noch einstellbaren Optionen zu erhalten, oder wechseln Sie die Voreinstellung zu benutzerdefiniert, um jeden Stop aus Ihrer eigenen Eingabe zu steuern. Die verbleibenden Optionen prägen die Animation-Kurzform: Name setzt die Kennung, die von der @keyframes-Regel und der Animation-Deklaration gemeinsam genutzt wird, Dauer und Verzögerung sind in Sekunden, und die Timing-Funktion deckt jeden Standard-Schlüsselwort plus eine benutzerdefinierte cubic-bezier()-Kurve für eine genaue Easing-Form ab. Setzen Sie die Animation so, dass sie eine feste Anzahl von Malen wiederholt wird, oder schalten Sie unendlich ein, wählen Sie eine Richtung (normal, rückwärts, wechselnd, wechselnd rückwärts) und einen Füllmodus für das, was vorher und nachher passiert, und schalten Sie die webkit-Präfix-Option ein, um auch einen @-webkit-keyframes-Block und eine -webkit-animation-Zeile für ältere Safari- und Android-WebView-Versionen auszugeben.
Prozentwerte außerhalb von 0–100 werden in den Bereich geklemmt, "from" und "to" werden als Aliase für 0 und 100 akzeptiert, und leere oder falsch formatierte Zeilen werden übersprungen, anstatt die Ausgabe zu unterbrechen. Die Zählung unter der Ausgabe meldet, wie viele Keyframe-Stops generiert wurden, und die genaue Zeichenanzahl.
Alles läuft lokal in Ihrem Browser ab, während Sie eingeben — keine CSS- oder Animationsdaten werden jemals an einen Server gesendet. Kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter, oder senden Sie die Ausgabe zurück in die Eingabe, um die Schritte weiter zu verfeinern.
Häufige Fragen
Wie sieht das Eingabeformat aus?
Eine Zeile pro Keyframe-Stop: ein Prozentsatz, ein Semikolon, dann property:value. Fügen Sie auf derselben Zeile weitere property:value-Paare hinzu, jeweils durch ein Semikolon getrennt, um mehrere Eigenschaften gleichzeitig zu animieren — z. B. 50;opacity:0.5;transform:scale(1.1).
Was passiert, wenn ich eine Voreinstellung wie fade oder bounce wähle?
Das Tool verwendet einen integrierten Satz von Keyframe-Schritten für diese Voreinstellung und ignoriert, was sich in der Eingabebox befindet, während alle anderen Optionen — Name, Dauer, Timing, Richtung usw. — weiterhin gelten. Wechseln Sie zu benutzerdefiniert, um Ihre eigene Eingabe erneut zu verwenden.
Wie erhalte ich eine genaue benutzerdefinierte Easing-Kurve?
Stellen Sie die Timing-Funktion auf benutzerdefiniert ein und geben Sie vier kommagetrennte Zahlen im cubic-bezier-Feld ein, z. B. 0.25, 0.1, 0.25, 1. Ein ungültiger Wert fällt auf ease zurück, anstatt falsches CSS zu erzeugen.
Was ist der Unterschied zwischen Wiederholungsanzahl und unendlich?
Wiederholungsanzahl legt fest, wie viele Male die Animation vor dem Stopp abgespielt wird. Das Einschalten von unendlich überschreibt dies und wiederholt die Animation unendlich.
Werden meine Animationsdaten irgendwo hochgeladen?
Nein. Der @keyframes-Block und die Animation-Kurzform werden vollständig in Ihrem Browser generiert — nichts, das Sie eingeben, verlässt jemals Ihr Gerät.