animation-fill-mode -ominaisuus

Voimme hallita elementin tyylejä ennen animaation suorittamista ja sen jälkeen. animation-fill-mode määrittää, säilyttääkö elementti animaation lopullisen tilan vai palautuuko se alkuperäiseen tilaansa.

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

• none – Tämä on oletusarvo. Animaatio ei vaikuta elementin ulkoasuun ennen tai jälkeen animaation. Elementti näyttää samalta kuin alussa;
• forwards – Tarkoittaa, että animaation lopussa olevat tyylit jäävät elementille, eikä se palaudu alkuperäiseen ulkoasuunsa;
• backwards – Tarkoittaa, että elementillä on animaation alussa määritetyt tyylit. Tämä pätee myös, jos animaatio käynnistyy esimerkiksi hoverilla tai siinä on viivettä;
• both – Yhdistää backwards ja forwards. Ennen animaation suorittamista elementillä on animaation alussa määritetyt tyylit. Animaation jälkeen elementillä on animaation lopussa määritetyt tyylit.

Tarkastellaan seuraavaa esimerkkiä, jossa havainnollistetaan arvojen eroja. Esimerkki osoittaa, että elementin tila ei koskaan muutu, jos animation-fill-mode on asetettu oikein. Kun koodi suoritetaan, elementtien lopullinen tila pysyy muuttumattomana. Jos haluat nähdä animaation uudelleen, lataa sivu uudestaan.

animation-play-state -ominaisuus

Animaation toistotilaa voidaan hallita. Se voi olla tauolla tai käynnissä.

animation-play-state: running | paused

• running – Tämä on oletusarvo. Käynnistää tai jatkaa animaatiota;
• paused – Pysäyttää animaation nykyiseen tilaan.

Tarkastellaan seuraavaa esimerkkiä, jossa pysäytämme äärettömän animaation, kun kursori on elementin päällä.