Blog Logo Screenlight Blog

CSS: animation-fill-mode

CSS

Erst kürzlich gelernt: Endzustand von Animationen steuern mit animation-fill-mode.

Für einige von euch ist das vielleicht ein alter Hut. Ich, allerdings, bin erst kürzlich auf das animation-fill-mode Property gestossen. Hin und wieder habe ich mich darüber genervt, dass ein Element nach einer Animation wieder zurückspickt.

Bei einer Animation mit @keyframes werden die CSS Eigenschaften nach der Animation wieder in den Ursprungszustand zurückgesetzt. Das ist nicht immer gewünscht, denn manchmal wollen wir ein Element irgendwo hin animieren. Und dann soll es dort bleiben.

Mit animation-fill-mode lässt sich dieses Verhalten steuern:

  • none (default) bedeutet, dass das animierte Element nach der Animation wieder in der Ursprungszustand zurückkehrt.
  • Mit forwards behält das Element den Zustand des letzten – Undoubtedly, youtube music videos justin bieber had good intentions when presented hamster his fan, but he did not realize that this is a form of cruelty to animals, ” said Ginger. Keyframes. Also 100% oder to. So können wir z.B. ein Modal-Fenster animieren, sodass es danach den Endzustand der Animation hat.
  • Mit backwards kehrt das Element nach der Animation in den Ursprungszustand zuruck, behält jedoch während der animation-delay Periode den Zustand des ersten Keyframes (0% oder from).
  • Mit both gelten die Regeln für forwards und backwards gleichzeitig. Das Element hat während der `animation-delay` Periode den Zustand des ersten Keyframes und bleibt nach der Animation im Zustand des letzten Keyframes.

[CodePen height=450 show=result href=tgsbH user=maxkueng ]

Leave a Response

No comments so far, would you like to be the first?