CSS-Animation-Generator – @keyframes mit Live-Vorschau
Erstelle vollständige @keyframes-Animationen mit Steuerung von Dauer, Timing, Verzögerung, Wiederholung und Richtung. Eine Live-Vorschau zeigt das Ergebnis, und ein Klick kopiert den fertigen Code. Alles läuft in deinem Browser, ohne Upload.
So verwendest du dieses Werkzeug
- Legen Sie Animationsname, Dauer, Zeitfunktion und andere Eigenschaften fest.
- Klicken Sie auf Abspielen, um die Animation auf dem Demo-Element anzusehen.
- Kopieren Sie die generierte CSS-Klasse und den @keyframes-Block.
.fade-in {
animation-name: fade-in;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}The keyframe template shows a fade-in-up effect. Edit the @keyframes block to customise the animation. Everything runs in your browser.
Über CSS-Animation Generator
Der CSS-Animation-Generator setzt eine komplette @keyframes-Animation samt zugehöriger Klasse zusammen, ohne dass du die Syntax von Hand schreiben musst. Du legst Animationsname, Dauer in Sekunden, Timing-Funktion, Verzögerung, Wiederholungsanzahl, Richtung und Füllmodus über gewöhnliche Formularfelder und Auswahllisten fest. Die Ausgabe ist eine einsatzbereite CSS-Regel plus ein passender @keyframes-Block, und beide aktualisieren sich live, sobald du eine Einstellung änderst. Das Namensfeld wandelt deine Eingabe automatisch in Kleinbuchstaben um und setzt Bindestriche, damit sie ein gültiger CSS-Bezeichner bleibt.
Die Steuerelemente bilden die CSS-Animationseigenschaften direkt ab. Die Timing-Funktion bietet ease, linear, die drei ease-in/out-Varianten und einen cubic-bezier-Vorgabewert. Die Richtung deckt normal, reverse, alternate und alternate-reverse ab, während der Füllmodus none, forwards, backwards und both bietet. Die Wiederholungsanzahl ist ein Freitextfeld, sodass du eine Zahl wie 1 oder 3 eingeben kannst oder das Schlüsselwort infinite – genau das, was CSS an dieser Stelle akzeptiert.
Ein Button „Vorschau abspielen” animiert ein Demo-Quadrat, damit du Timing und Richtung spürst, bevor du dich festlegst. Die Vorschau nutzt ein eingebautes fade-in-up-Keyframe – das Element blendet aus der Transparenz ein, während es zwanzig Pixel nach oben gleitet – und respektiert deine gewählte Dauer, Verzögerung, Timing-Funktion, Wiederholung, Richtung und den Füllmodus. Da die Vorschau bei jedem Klick auf Abspielen neu läuft, kannst du das Timing schnell durchprobieren, ohne etwas neu zu laden.
Der erzeugte @keyframes-Block kommt mit eben jener fade-in-up-Vorlage als Ausgangspunkt, mit Schritten für opacity und transform bei 0 % und 100 %. Er ist zum Bearbeiten gedacht; sobald du die Ausgabe einfügst, kannst du die Keyframe-Schritte umschreiben, um jede gewünschte Bewegung zu beschreiben, während du die vom Werkzeug erzeugten Timing-Eigenschaften behältst. Ein Kopieren-Button legt das ganze Snippet in deine Zwischenablage. Alles läuft in deinem Browser, ohne Upload und ohne Konto.
Häufig gestellte Fragen
- Welche Animationseigenschaften kann ich steuern?
- Name, Dauer, Timing-Funktion, Verzögerung, Wiederholungsanzahl, Richtung und Füllmodus. Jede bildet ihre CSS-animation-*-Eigenschaft ab, und die erzeugte Regel sowie der @keyframes-Block aktualisieren sich live, während du sie änderst.
- Was zeigt der Button „Vorschau abspielen”?
- Er lässt die Animation mit deinen aktuellen Einstellungen auf einem Demo-Quadrat laufen. Die Vorschau nutzt eine eingebaute fade-in-up-Bewegung, blendet ein, während sie nach oben gleitet, damit du Timing, Verzögerung und Richtung beurteilen kannst, bevor du den Code kopierst.
- Kann ich eine andere Bewegung als fade-in-up erstellen?
- Ja. Der erzeugte @keyframes-Block nutzt fade-in-up als Ausgangsvorlage, ist aber zum Bearbeiten gedacht. Schreibe nach dem Einfügen die Schritte innerhalb von @keyframes um, um jede beliebige Bewegung zu beschreiben, während du die vom Werkzeug erstellten Timing-Eigenschaften behältst.
- Was kann ich bei der Wiederholungsanzahl eingeben?
- Jeden Wert, den CSS an dieser Stelle akzeptiert: eine Zahl wie 1, 2 oder 3, um eine bestimmte Anzahl von Wiederholungen festzulegen, oder das Schlüsselwort infinite für eine Endlosschleife. Genau dafür ist es ein Freitextfeld.
- Welche Timing-Funktionen sind verfügbar?
- ease, linear, ease-in, ease-out, ease-in-out und ein Vorgabewert cubic-bezier(0.4, 0, 0.2, 1). Die gewählte Funktion wird in animation-timing-function geschrieben und in der Vorschau angewendet.
- Warum ändert sich mein Animationsname beim Tippen?
- Das Namensfeld normalisiert die Eingabe zu einem gültigen CSS-Bezeichner, indem es Kleinbuchstaben erzwingt und Leerzeichen durch Bindestriche ersetzt. So bleiben die erzeugte Klasse und der @keyframes-Name ohne manuelle Nacharbeit nutzbar.
- Was bewirken Richtung und Füllmodus?
- Die Richtung steuert, ob jeder Zyklus vorwärts, rückwärts oder abwechselnd abläuft. Der Füllmodus steuert, ob das Element die Anfangs- oder Endstile der Animation vor und nach ihrem Ablauf behält; both und forwards sind gängig, um den Endzustand zu halten.
- Läuft das auf einem Server?
- Nein. Das CSS wird vollständig in deinem Browser erzeugt und in der Vorschau gezeigt. Nichts wird hochgeladen, und es ist kein Konto nötig.