Animaation Keston ja Ajoituksen Määrittely
Tarkastellaan kaikkia mahdollisia tapoja työskennellä animaation ajan kanssa.
animation-duration-ominaisuus
animation-duration määrittää ajan, joka tarvitaan animaation yhden syklin suorittamiseen (muutos alkuperäisestä lopulliseen tilaan), mitattuna sekunneissa (s) tai millisekunneissa (ms).
animation-duration: 3s | 3000ms
Suoritetaan seuraava esimerkki ja viedään hiiri laatikon päälle:
index.html
index.css
animation-timing-function -ominaisuus
animation-timing-function määrittää, miten animaatio etenee ajan kuluessa, ohjaten animaation kiihtyvyyttä ja hidastuvuutta. animation-timing-function voi saada samat arvot kuin transition-timing-function -ominaisuus. Useita ennalta määriteltyjä ajoitustoimintoja on saatavilla, kuten linear, ease ja ease-in-out, tai voimme määrittää oman cubic bezier -käyrän käyttämällä cubic-bezier() -funktiota.
animation-timing-function: time_function
Sovelletaan erilaisia time_function-arvoja esimerkin laatikoihin:
index.html
index.css
animation-delay-ominaisuus
animation-delay määrittää ajan, joka kuluu ennen animaation alkamista. Arvo voidaan ilmoittaa sekunteina (s) tai millisekunteina (ms).
animation-delay: 0.1s | 100ms
Sovelletaan eri viiveitä laatikoihin esimerkissä:
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.08Animaation Keston ja Ajoituksen Määrittely
Pyyhkäise näyttääksesi valikon
Tarkastellaan kaikkia mahdollisia tapoja työskennellä animaation ajan kanssa.
animation-duration-ominaisuus
animation-duration määrittää ajan, joka tarvitaan animaation yhden syklin suorittamiseen (muutos alkuperäisestä lopulliseen tilaan), mitattuna sekunneissa (s) tai millisekunneissa (ms).
animation-duration: 3s | 3000ms
Suoritetaan seuraava esimerkki ja viedään hiiri laatikon päälle:
index.html
index.css
animation-timing-function -ominaisuus
animation-timing-function määrittää, miten animaatio etenee ajan kuluessa, ohjaten animaation kiihtyvyyttä ja hidastuvuutta. animation-timing-function voi saada samat arvot kuin transition-timing-function -ominaisuus. Useita ennalta määriteltyjä ajoitustoimintoja on saatavilla, kuten linear, ease ja ease-in-out, tai voimme määrittää oman cubic bezier -käyrän käyttämällä cubic-bezier() -funktiota.
animation-timing-function: time_function
Sovelletaan erilaisia time_function-arvoja esimerkin laatikoihin:
index.html
index.css
animation-delay-ominaisuus
animation-delay määrittää ajan, joka kuluu ennen animaation alkamista. Arvo voidaan ilmoittaa sekunteina (s) tai millisekunteina (ms).
animation-delay: 0.1s | 100ms
Sovelletaan eri viiveitä laatikoihin esimerkissä:
index.html
index.css
Kiitos palautteestasi!
