animation-fill-mode legt fest, ob die animation am Ende zurückspringt (backwards – die Vorgabe) oder mit den Eigenschaften des letzten Keyframes endet (forwards).

animation-play-state, animation-fill-mode und animation-direction steuern das Abspielen von CSS-animationen und legen z.B. fest, ob die animation am Ende zurückspringt oder mit den Eigenschaften des letzten Keyframes endet.

Beispiele für einfache, responsive CSS Keyframes-Animationen ohne Javascript und ohne :hover … endloses Panorama und Schneekugel. CSS Keyframes sparen viele Zeilen Javascript.

Animationen steuern, in Abhängigkeit voneinander zu starten: pausieren, canceln, das Ende einer Animation erkennen mit finish().

SMIL-Animationen synchronisieren sich anhand von Aktionen wie click und mouseover und eine Animation kann den Start einer weiteren Animation triggern.

Javascript animate() lehnt sich an CSS-Keyframe-Animationen an und borgt sich CSS-Eigenschaften und -Optionen wie duration und easing.

animation-delay bewirkt eine Verzögerung vor dem Start einer animation in Sekunden, aber keine Verzögerung zwischen wiederholten Durchläufen einer animation.

Animationen mit setInterval werden alle x Millisekunden wiederholt, so dass eine Sequenz aus aufeinanderfolgenden Bildern entsteht. clearInterval beendet die Sequenz.

CSS kennt keine Animation entlang eines Pfades: Das gibt es erst mit offset-path (zuvor motion path). Allerdings wird motion path nur von Chrome unterstützt und steht bei Firefox und Microsoft » Under Consideration « – in Betracht gezogen.

Animationen werden mit setTimeout oder setInterval oder in Gang gesetzt und mit clearTimeout bzw. clearInterval deaktiviert. requestAnimationFrame ist neuer und effizienter