CSS-Animations-Generator
Erstellen Sie einsatzbereiten CSS-Code für Keyframe-Animationen mit anpassbarem Namen, Dauer, Easing, Richtung und Füllmodus.
Tool ausführen
Mit diesem Generator erstellen Sie sauberen CSS-Code für weiche Einblendeffekte auf Webseiten. Das Online-Tool kombiniert eine zweistufige Keyframe-Definition mit einer passenden CSS-Eigenschaft für HTML-Elemente. Sie legen individuelle Werte für den Animationsnamen, die Laufzeit in Sekunden, den zeitlichen Verlauf, die Abspielrichtung und das Füllverhalten fest. Wenn Sie Parameter auslassen, greift das Werkzeug auf bewährte Standardwerte wie eine Dauer von einer Sekunde zurück. Bleibt das Namensfeld leer, setzt der Generator automatisch eine Standardbezeichnung ein. Die erzeugte Keyframe-Sequenz steuert den Übergang von vollständiger Transparenz mit einem Versatz von zwanzig Pixeln zur regulären Position bei voller Deckkraft. Den ausgegebenen Code-Block fügen Sie direkt in Ihre Stylesheets ein, um Karten, Menüs oder Dialogfenster im Webdesign aufzuwerten. Sie können verschiedene Zeitwerte und Verlaufsarten flexibel vergleichen, bevor Sie den Code in Ihr Projekt übernehmen. So erhalten Sie rasch eine fehlerfreie Syntax ohne langes manuelles Tippen.
Anleitung
- Geben Sie optional einen Namen für Ihre Animation in das Feld Animationsname ein.
- Tragen Sie die gewünschte Animationsdauer als Zahl in Sekunden ein.
- Geben Sie die Verlaufsfunktion für das Easing wie ease oder linear an.
- Legen Sie die Abspielrichtung und den Füllmodus nach Bedarf fest.
- Klicken Sie auf Generieren, um den CSS-Code und die Keyframe-Regel zu erstellen.
Beispiele
- Standard-Einblendung: Bei Eingabe von Animationsname 'fadeIn', Dauer 1, Easing 'ease', Richtung 'normal' und Füllmodus 'none' generiert das Tool die Keyframes für @keyframes fadeIn und die Deklaration animation: fadeIn 1s ease normal none;.
- Sanfter Karteneinstieg: Bei Eingabe von Animationsname 'cardSlideUp', Dauer 0.5, Easing 'ease-out', Richtung 'normal' und Füllmodus 'forwards' erzeugt das Werkzeug die Definition @keyframes cardSlideUp und animation: cardSlideUp 0.5s ease-out normal forwards;.
FAQ
Was passiert, wenn das Feld für den Animationsnamen frei bleibt?
Wenn kein Name eingegeben wird, setzt das Werkzeug automatisch die Standardbezeichnung fadeIn in der Keyframe-Definition und der Zuweisung ein.
Welche Keyframe-Zustände werden standardmäßig generiert?
Der Generator definiert zwei Stufen: Bei 0 % startet das Element mit einer Deckkraft von 0 und einer Verschiebung von 20 Pixeln nach unten, bei 100 % erreicht es die Ausgangsposition mit voller Deckkraft.
In welchem Format wird die Dauer ausgegeben?
Der eingegebene Zahlenwert wird in der CSS-Kurzschreibweise direkt mit der Einheit s für Sekunden versehen, beispielsweise 2s bei einem Eingabewert von 2.
Können weitere CSS-Eigenschaften in der Animation ergänzt werden?
Das Tool erzeugt die vorgegebene Einblend- und Verschiebesequenz. Zusätzliche Eigenschaften wie Farben oder Rotationen können Sie nach dem Kopieren des Codes im Stylesheet hinzufügen.