CSS-Animation mit Keyframes erstellen: Anleitung für den Generator

Eine CSS-Keyframe-Animation gezielt vorbereiten

Mit dem CSS Animation Generator erstellen Sie einen CSS-Text für eine Keyframe-Animation, ohne die zentralen Animationswerte einzeln in einer Vorlage zusammenzustellen. Sie können den Namen der Animation, die Dauer, das Easing sowie Richtung und Füllmodus vorgeben. Das eignet sich zum Beispiel, wenn ein Element beim Einblenden zunächst leicht nach unten versetzt erscheinen und anschließend an seine Zielposition wechseln soll.

CSS-Animation mit eigenen Werten erzeugen

1. Öffnen Sie das Werkzeug und geben Sie im Feld für den Animationsnamen einen Namen ein, etwa slideIn. Wenn Sie das Feld leer lassen, wird der Standardwert fadeIn verwendet.

2. Tragen Sie die gewünschte Dauer als Zahl ein, zum Beispiel 0.8. Die Dauer wird in der Animationserklärung mit der Einheit Sekunden ausgegeben. Wählen Sie danach ein Easing, eine Richtung und einen Füllmodus. Diese fünf Angaben bilden die vorgesehenen Anpassungen: Animationsname, Dauer, Easing, Richtung und Füllmodus.

3. Starten Sie die Berechnung beziehungsweise Erzeugung mit der dafür vorgesehenen Aktion. Bei einer erfolgreichen Berechnung erhalten Sie CSS-Text mit einem Keyframe-Abschnitt und einer Animationserklärung für ein Element. Prüfen Sie vor der Verwendung, ob Name, Zeitangabe und die drei Auswahlwerte zu Ihrem vorgesehenen Ablauf passen.

4. Übernehmen Sie den erzeugten CSS-Text in den passenden Stilbereich Ihres Projekts und verwenden Sie denselben Animationsnamen für das Element, das animiert werden soll. Wenn Sie nur die Ausgabe prüfen möchten, achten Sie zunächst darauf, dass sowohl der Keyframe-Teil als auch die Animationserklärung enthalten sind.

Ausgabe richtig einordnen

Die erfolgreiche Ausgabe beschreibt einen festen Bewegungsablauf mit zwei Stufen. Bei 0 Prozent beträgt die Deckkraft 0 und das Element ist vertikal um 20 Pixel versetzt. Bei 100 Prozent beträgt die Deckkraft 1 und die vertikale Verschiebung ist 0. Dadurch entsteht ein Einblenden mit einer Bewegung nach oben zur Zielposition.

Die von Ihnen gesetzten Werte verändern die Animationserklärung: Der Name wird dort verwendet, die Dauer erscheint mit s, und Easing, Richtung sowie Füllmodus werden als die ausgewählten Animationsangaben berücksichtigt. Die Keyframes selbst bestehen weiterhin aus den beschriebenen Deckkraft- und Verschiebungsstufen. Das Werkzeug ist daher passend, wenn genau dieser Ablauf genügt, nicht aber, wenn Sie zusätzliche Zwischenstufen oder andere CSS-Eigenschaften benötigen.

Bleibt das Namensfeld leer, wird standardmäßig fadeIn als Name eingesetzt, sodass dieser Name bei der Weiterverwendung berücksichtigt werden muss. Fehlt in der Ausgabe der Keyframe-Abschnitt oder die Animationserklärung, liegt kein erfolgreich erzeugtes Ergebnis in der vorgesehenen Form vor.

Praktisches Beispiel

Eine Oberfläche soll beim Erscheinen aus einer um 20 Pixel nach unten versetzten Position an ihre Zielposition bewegt werden.

Für eine kurze Einblendung geben Sie den Namen slideIn, die Dauer 0.8, ein gewünschtes Easing, die Richtung normal und den Füllmodus none ein und starten die Erzeugung.

Die erfolgreiche Ausgabe enthält CSS-Text mit einem Keyframe-Abschnitt und einer Animationserklärung. Der Keyframe-Abschnitt beschreibt 0 Prozent mit Deckkraft 0 und 20 Pixel vertikaler Verschiebung sowie 100 Prozent mit Deckkraft 1 und Verschiebung 0.

Einschränkungen

• Die beschriebenen Funktionen bieten einen festen Keyframe-Ablauf mit Deckkraft und vertikaler Verschiebung. Zusätzliche Zwischenstufen, beliebige CSS-Eigenschaften oder andere Animationseffekte sind nicht als Anpassungen ausgewiesen.

Häufige Fehler

• Leerer Animationsname: Wenn Sie einen eigenen Namen erwarten, das Feld aber leer lassen, wird standardmäßig fadeIn eingesetzt. Geben Sie deshalb den gewünschten Namen ausdrücklich ein und prüfen Sie, dass derselbe Name später am animierten Element verwendet wird.

Häufige Fragen

Kann ich mit dem Generator eine Einblendanimation mit Bewegung nach oben erstellen?

Ja, sofern Sie genau den vorgesehenen Bewegungsablauf verwenden möchten: Die Keyframes wechseln von Deckkraft 0 und 20 Pixel vertikaler Verschiebung zu Deckkraft 1 und keiner Verschiebung. Weitere Zwischenstufen oder andere CSS-Eigenschaften werden von den geprüften Funktionen nicht beschrieben.

In welcher Einheit wird die Animationsdauer ausgegeben?

Die Dauer wird als eingegebener Wert mit der Einheit Sekunden in der Animationserklärung ausgegeben. Wenn Sie beispielsweise 0.8 eingeben, wird die Zeitangabe als Sekundenwert ausgegeben.

Was passiert bei einem leeren Animationsnamen?

Wenn das Namensfeld leer bleibt, wird standardmäßig der Name fadeIn verwendet. Für einen abweichenden Namen tragen Sie die gewünschte Bezeichnung in das Feld ein.