CSS Keyframe-Animationsgenerator

Eine CSS-@keyframes-Regel ist im Grunde eine kleine Zeitleiste: eine Reihe prozentualer Prüfpunkte, von denen jeder festlegt, wie eine Eigenschaft zu genau diesem Zeitpunkt aussehen soll, wobei der Browser alles dazwischen interpoliert. Wer eine solche Regel von Hand erstellt, muss mehrere dieser prozentualen Prüfpunkte für mehrere Eigenschaften gleichzeitig im Kopf behalten – dieser Generator macht aus dieser Zeitleiste etwas, das Sie tatsächlich sehen und verschieben können: eine horizontale Spur pro Eigenschaft, mit einem Stopp-Marker an jedem Prüfpunkt.

Das Herzstück ist der Scrub-Abspielkopf. Ziehen Sie ihn an einen beliebigen Punkt zwischen 0 % und 100 %, und der Vorschaubereich springt sofort auf den exakten kombinierten Zustand zu diesem Zeitpunkt – nicht auf den nächstgelegenen Keyframe, sondern auf einen tatsächlich linear interpolierten Wert, der aus den beiden Stopps berechnet wird, die den Abspielkopf auf jeder aktiven Spur umgeben. Numerische Eigenschaften wie Position, Drehung und Skalierung werden als einfache Zahlen interpoliert; Background-Color interpoliert jeden Rot-, Grün- und Blaukanal unabhängig, was dafür sorgt, dass eine Farbspur sanft durch Zwischentöne überblendet, anstatt zwischen den tatsächlich gesetzten Farben zu springen.

Mehrere Spuren werden automatisch zu einer einzigen schlüssigen Animation kombiniert: Jede transformbasierte Eigenschaft (Verschieben, Drehen, Skalieren) fließt bei jedem Keyframe-Prozentsatz in eine einzige transform-Deklaration ein, während Opacity und Background-Color in eigenen Zeilen bleiben – genau so, wie echter handgeschriebener CSS-Code aussehen würde. Prozentsätze, bei denen eine Spur keinen expliziten Stopp hat, werden in den Deklarationen dieser Eigenschaft bewusst ausgelassen – die browserinterne Keyframe-Interpolation füllt die Lücke zwischen den vorhandenen Stopps, genau wie bei jeder von Hand getippten @keyframes-Regel.

Fünf Presets – Aufprall, Wackeln, Pulsieren, Ausblenden und Einblenden – laden mit einem Klick eine vollständige, zum Anpassen bereite Zeitleiste (inklusive sinnvoller Dauer, Timing-Funktion und Wiederholungsanzahl). Klicken Sie jederzeit auf Abspielen, um zu sehen, wie die echte CSS-Animation auf dem Vorschauelement abläuft – generiert in Echtzeit über ein dynamisch eingefügtes Stylesheet – und kopieren Sie dann den gesamten @keyframes-Block plus die Kurzschreibweise `.animated-element { animation: ... }` direkt in Ihr eigenes Projekt. Wie jedes Tool auf dieser Seite läuft alles lokal im Browser, und es wird niemals etwas hochgeladen.