Animaatiotilojen Hallinta CSS:ssä
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
jaforwards
. 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.
index.html
index.css
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ä.
index.html
index.css
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.04
Animaatiotilojen Hallinta CSS:ssä
Pyyhkäise näyttääksesi valikon
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
jaforwards
. 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.
index.html
index.css
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ä.
index.html
index.css
Kiitos palautteestasi!