animation-fill-mode-egenskapen

Vi kan styra elementets stilar före och efter att animationen körs. animation-fill-mode anger om ett element ska behålla sitt slutliga tillstånd från animationen eller återgå till sitt ursprungliga tillstånd.

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

• none – Detta är standardvärdet. Animationen påverkar inte elementets utseende före eller efter animationen. Elementet ser ut som det gjorde från början;
• forwards – Det innebär att stilarna vid slutet av animationen kommer att finnas kvar för elementet, och det återgår inte till sitt ursprungliga utseende;
• backwards – Det innebär att elementet får de stilar som anges i början av animationen. Även om animationen triggas vid hover eller har någon fördröjning;
• both – Kombinerar backwards och forwards. Det innebär att innan animationen körs får elementet de stilar som anges vid animationens start. Efter att animationen körts får elementet de stilar som anges vid animationens slut.

Låt oss titta på följande exempel för att se skillnaden mellan värdena. Det är gjort för att visa att elementets tillstånd aldrig kommer att ändras om vi har tillämpat animation-fill-mode med rätt värde. Efter att koden körts kommer elementens slutliga tillstånd att vara oföränderliga. Om vi behöver se animationen igen, vänligen ladda om sidan.

animation-play-state-egenskap

Vi kan kontrollera animationens uppspelningsläge. Den kan pausas eller köras.

animation-play-state: running | paused

• running – Detta är standardvärdet. Startar eller återupptar animationen;
• paused – Stoppar animationen i dess nuvarande tillstånd.

Vi kan titta på följande exempel, där vi stoppar den oändliga animationen vid hovring med markören.