CSS-Keyframe-Animationsgenerator

Eine CSS-@keyframes-Regel ist eigentlich eine kleine Zeitleiste: eine Reihe prozentualer Prüfpunkte, von denen jeder angibt, wie eine Eigenschaft genau in diesem Moment aussehen soll, wobei der Browser alles dazwischen interpoliert. Wenn Sie einen manuell erstellen, müssen Sie mehrere dieser prozentualen Kontrollpunkte für mehrere Grundstücke gleichzeitig im Kopf behalten. Dieser Generator verwandelt diese Zeitleiste in etwas, das Sie tatsächlich sehen und ziehen können: eine horizontale Spur pro Grundstück mit einer Stoppmarkierung an jedem Kontrollpunkt.

Das Herzstück ist der Scrub-Abspielkopf. Ziehen Sie es an einen beliebigen Punkt zwischen 0 % und 100 % und das Vorschaufeld springt in diesem Moment in den genauen kombinierten Zustand – nicht den nächsten Keyframe, sondern einen echten linear interpolierten Wert, der zwischen 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; Hintergrundfarbe interpoliert jeden roten, grünen und blauen Kanal unabhängig voneinander, wodurch eine Farbspur sanft durch Zwischentöne übergeht, anstatt zwischen den Farben zu springen, die Sie tatsächlich eingestellt haben.

Mehrere Spuren werden automatisch zu einer zusammenhängenden Animation kombiniert: Jede transformbasierte Eigenschaft (Verschieben, Drehen, Skalieren) wird bei jedem Keyframe-Prozentsatz in einer einzigen Transformationsdeklaration zusammengeführt, während Deckkraft und Hintergrundfarbe in ihren eigenen Zeilen bleiben, genau wie echtes handgeschriebenes CSS aussehen würde. Prozentsätze, bei denen ein bestimmter Track keinen expliziten Stopp hat, werden in den Deklarationen dieser Eigenschaft einfach absichtlich weggelassen – die Keyframe-Interpolation des Browsers füllt die Lücke zwischen den vorhandenen Stopps, genau wie bei jeder manuell eingegebenen @keyframes-Regel.

Fünf Voreinstellungen – Bounce, Shake, Pulse, Fade und Slide-in – laden mit einem Klick eine vollständige, sofort anpassbare Timeline (einschließlich sinnvoller Dauer, Timing-Funktion und Wiederholungsanzahl). Klicken Sie jederzeit auf „Play“, um zu sehen, wie die echte CSS-Animation auf dem Vorschauelement ausgeführt wird, die im Handumdrehen durch ein dynamisch injiziertes Stylesheet generiert wird, und kopieren Sie dann den vollständigen @keyframes-Block plus die Abkürzung .animated-element {animation: ... } direkt in Ihr eigenes Projekt. Wie jedes Tool auf dieser Website läuft alles lokal im Browser, ohne dass jemals etwas hochgeladen wird.