Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Animaatiotilojen Hallinta CSS:ssä | Edistyneet CSS-animaatiot
Edistyneet CSS-tekniikat

bookAnimaatiotilojen 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 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.

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Mikä on animation-fill-mode-ominaisuuden tarkoitus

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookAnimaatiotilojen 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 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.

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Mikä on animation-fill-mode-ominaisuuden tarkoitus

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 4
some-alt