🎬 CSS-Keyframe-Builder
CSS-Keyframe-Animationen in Sekunden gestalten — transform und opacity je Stop setzen, Live-Animation vorschauen und den fertigen @keyframes-Code kopieren. Ohne Installation oder Anmeldung, läuft vollständig im Browser.
Über
Der CSS-Keyframe-Builder ermöglicht es, @keyframes-Animationen zu erstellen, ohne eine einzige Zeile Code von Hand zu schreiben. Du definierst Transform-Eigenschaften — translate (X und Y), scale und rotate — sowie opacity an drei wichtigen Stops: 0 %, 50 % und 100 %. Animationsdauer, eine Timing-Funktion (ease, linear, ease-in, ease-out, ease-in-out oder ein benutzerdefinierter cubic-bezier) und die Wiederholungsanzahl (endlich oder infinite) lassen sich alle im Panel einstellen. Eine Live-Animationsvorschau aktualisiert sich sofort, damit du Werte anpassen kannst, bis die Bewegung sich richtig anfühlt. Wenn du bereit bist, klicke auf Kopieren — der vollständige @keyframes-Block inklusive der animation-Kurzform wird in die Zwischenablage gelegt und ist bereit zum Einfügen in dein Stylesheet. Alles läuft im Browser, ohne Datei-Upload oder Datenübertragung.
Verwendung
- Lege die Transform-Werte — translate X/Y, scale und rotate — sowie opacity für den 0%-Stop (den Animationsstart) fest.
- Passe die 50%-Stop-Werte an, um den Mittelpunkt der Bewegung zu definieren, oder belasse sie auf dem Standardwert, um einen einfachen Zwei-Zustands-Übergang zu erstellen.
- Lege die 100%-Stop-Werte für den Endzustand fest und konfiguriere anschließend Dauer (in Sekunden), Timing-Funktion und Wiederholungsanzahl.
- Beobachte, wie die Live-Vorschau in Echtzeit aktualisiert wird, und optimiere jeden Wert, bis die Animation genau richtig aussieht.
- Klicke auf CSS kopieren, um den vollständigen @keyframes-Block und die animation-Eigenschaft in die Zwischenablage zu kopieren, und füge ihn dann direkt in dein Stylesheet ein.
Häufige Fragen
- Welche Transform-Eigenschaften kann ich animieren?
- Du kannst translateX, translateY, scale und rotate sowie opacity animieren. Jede Eigenschaft wird unabhängig an den Keyframe-Stops 0 %, 50 % und 100 % gesetzt.
- Welche Timing-Funktionen stehen zur Verfügung?
- Der Builder enthält die Presets ease, linear, ease-in, ease-out und ease-in-out sowie eine benutzerdefinierte cubic-bezier-Option, mit der du eine einzigartige Beschleunigungskurve gestalten kannst.
- Kann ich die Animation endlos schleifen lassen?
- Ja. Stelle die Wiederholungsanzahl auf Infinite, und das generierte CSS verwendet animation-iteration-count: infinite, sodass die Animation endlos läuft.
- Muss ich CSS kennen, um dieses Tool zu verwenden?
- Nein. Der Builder ist vollständig visuell — einfach Schieberegler bewegen und Werte aus Dropdowns auswählen. Das CSS wird automatisch generiert und ist bereit zum Einfügen in jedes Projekt.
- Ist das generierte CSS mit allen modernen Browsern kompatibel?
- Ja. Die Ausgabe verwendet standardmäßige @keyframes und die animation-Kurzform, die in allen modernen Browsern einschließlich Chrome, Firefox, Safari und Edge ohne Vendor-Präfixe unterstützt werden.