CSS Animation: animation-fill-mode: forwards;

Heute gibt es einen kleinen Trick rund um die Animation mit CSS. Mit CSS lassen sich leicht Effekte zaubern, man kann beispielsweise Elemente vergrößern oder bewegen. Standardmäßig wird die angelegte Animation durchlaufen und danach beendet, der ursprüngliche Zustand wird wiederhergestellt. Über den Animation Fill-Mode lässt sich genau dies steuern.

Ein konkreter Anwendungsfall, bei dem ich auf diese Eigenschaft stieß, ist eben der, dass wir den Zustand zum Ende einer Animation beibehalten möchten. Genau das realisieren wir mit dem Fill-Mode.

animation-fill-mode: forwards;

Neben der Eigenschaft forwards, die der Animation mitteilt, dass nach deren Ablauf der letzte Zustand beibehalten werden soll, gibt es weitere Werte.

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

forwards führt zu dem Zustand, der zu Beginn der Animation bestand. both kombiniert sowohl forwardsals auch backwards. Wird die Eigenschaft nicht benutzt, so wird hier none ausgeführt.