Question 1

Was ist eine CSS-Keyframe-Animation?

Accepted Answer

CSS-Keyframe-Animationen (@keyframes) ermöglichen es, den Zustand eines Elements an bestimmten Zeitpunkten (Schlüsselbildern) zu definieren. Der Browser interpoliert automatisch zwischen diesen Zuständen und erzeugt so eine flüssige Animation.

Question 2

Was ist der Unterschied zwischen CSS-Animationen und CSS-Transitions?

Accepted Answer

CSS-Transitions reagieren auf Zustandsänderungen (z.B. :hover) und laufen einmal ab. CSS-Animationen mit @keyframes können automatisch starten, wiederholt werden und haben mehr Kontrollmöglichkeiten wie Richtung und Füllmodus.

Question 3

Was bedeutet animation-fill-mode?

Accepted Answer

animation-fill-mode legt fest, welche Stile das Element vor dem Start (backwards) oder nach dem Ende (forwards) der Animation annimmt. 'both' kombiniert beide. 'none' bedeutet, dass die Animation keinen Einfluss ausserhalb ihrer Laufzeit hat.

Question 4

Wie wirkt sich animation-direction aus?

Accepted Answer

animation-direction steuert die Abspielrichtung: 'normal' (vorwärts), 'reverse' (rückwärts), 'alternate' (vorwärts, dann rückwärts im Wechsel) und 'alternate-reverse' (rückwärts, dann vorwärts). Das ist nützlich für Loop-Animationen.

Question 5

Sind CSS-Animationen performant?

Accepted Answer

CSS-Animationen, die nur transform und opacity verändern, sind sehr performant, da sie vom Browser auf der GPU ausgeführt werden können. Animationen, die Layout-Eigenschaften wie width, height oder margin verändern, sind langsamer und sollten vermieden werden.

CSS-Animation-Generator

Live-Vorschau

Generierter CSS-Code

Animation-Preset

Timing

Über CSS-Animationen

Wann CSS-Animationen nutzen?

Performance-Tipp

Häufig gestellte Fragen