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
Can you explain the difference between animation-duration and animation-delay?
What are some common use cases for different animation-timing-functions?
Can you show how to combine these properties in a single animation?
Awesome!
Completion rate improved to 2.04Animaation 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!
