animation-fill-mode egenskab

Vi kan kontrollere elementets stil før og efter animationens afvikling. animation-fill-mode angiver, om et element skal bevare sin endelige tilstand fra animationen eller vende tilbage til sin oprindelige tilstand.

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

• none - Dette er standardværdien. Animationen påvirker ikke elementets udseende før eller efter animationen. Elementet vil se ud som oprindeligt;
• forwards - Det betyder, at stilarterne ved slutningen af animationen forbliver for elementet, og det vender ikke tilbage til sit oprindelige udseende;
• backwards - Det betyder, at elementet får de stilarter, der er angivet i starten af animationen. Selv hvis animationen udløses ved hover eller har en forsinkelse;
• both - Kombinerer backwards og forwards. Det betyder, at før animationen afvikles, får elementet de stilarter, der er angivet ved animationens start. Efter animationen får elementet de stilarter, der er angivet ved animationens slutning.

Lad os se på følgende eksempel for at undersøge forskellen mellem værdierne. Det er lavet for at vise, at elementets tilstand aldrig ændres, hvis vi har anvendt animation-fill-mode med den korrekte værdi. Efter koden er kørt, vil elementernes endelige tilstand ikke kunne ændres. Hvis vi skal se animationen igen, skal siden genindlæses.

animation-play-state egenskab

Vi kan kontrollere animationens afspilningstilstand. Den kan være sat på pause eller kørende.

animation-play-state: running | paused

• running - Dette er standardværdien. Starter eller genoptager animationen;
• paused - Stopper animationen i den nuværende tilstand.

Overvej følgende eksempel, hvor vi stopper den uendelige animation, når markøren holdes over elementet.