Animaation Toistojen ja Suunnan Hallinta
animation-iteration-count -ominaisuus
Animaation toistokertojen määrän hallinta. animation-iteration-count määrittää, kuinka monta kertaa animaatio toistetaan.
animation-iteration-count: number_without_units
Voidaan myös käyttää avainsanaa infinite arvona, jolloin animaatio toistuu jatkuvasti.
Alla oleva esimerkki havainnollistaa, miten animaatioiden määrään voidaan vaikuttaa:
index.html
index.css
animation-direction -ominaisuus
animation-direction ohjaa animaation suuntaa. Se määrittää, toistetaanko animaatio eteenpäin, taaksepäin vai vuorotellen molempiin suuntiin.
animation-direction: normal | reverse | alternate | alternate-reverse
normal– oletusarvo. Animaatio toistetaan eteenpäin alusta loppuun;reverse– animaatio toistetaan taaksepäin lopusta alkuun;alternate– animaatio toistetaan vuorotellen eteenpäin ja taaksepäin;alternate-reverse– animaatio toistetaan vuorotellen taaksepäin ja eteenpäin.
Tarkastellaan, millaisen vaikutelman voimme saavuttaa seuraavassa esimerkissä. Meillä on kuva, jonka oletuskäyttäytymisenä on liikkua toistuvasti vasemmalta oikealle. Voimme kuitenkin muuttaa sen käyttäytymistä. Testaamme kaikkia neljää animation-direction -ominaisuuden arvoa.
index.html
index.css
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me an example of how to use animation-iteration-count and animation-direction together?
What does the animation look like with each animation-direction value?
Can you explain the difference between alternate and alternate-reverse with a visual example?
Awesome!
Completion rate improved to 2.04Animaation Toistojen ja Suunnan Hallinta
Pyyhkäise näyttääksesi valikon
animation-iteration-count -ominaisuus
Animaation toistokertojen määrän hallinta. animation-iteration-count määrittää, kuinka monta kertaa animaatio toistetaan.
animation-iteration-count: number_without_units
Voidaan myös käyttää avainsanaa infinite arvona, jolloin animaatio toistuu jatkuvasti.
Alla oleva esimerkki havainnollistaa, miten animaatioiden määrään voidaan vaikuttaa:
index.html
index.css
animation-direction -ominaisuus
animation-direction ohjaa animaation suuntaa. Se määrittää, toistetaanko animaatio eteenpäin, taaksepäin vai vuorotellen molempiin suuntiin.
animation-direction: normal | reverse | alternate | alternate-reverse
normal– oletusarvo. Animaatio toistetaan eteenpäin alusta loppuun;reverse– animaatio toistetaan taaksepäin lopusta alkuun;alternate– animaatio toistetaan vuorotellen eteenpäin ja taaksepäin;alternate-reverse– animaatio toistetaan vuorotellen taaksepäin ja eteenpäin.
Tarkastellaan, millaisen vaikutelman voimme saavuttaa seuraavassa esimerkissä. Meillä on kuva, jonka oletuskäyttäytymisenä on liikkua toistuvasti vasemmalta oikealle. Voimme kuitenkin muuttaa sen käyttäytymistä. Testaamme kaikkia neljää animation-direction -ominaisuuden arvoa.
index.html
index.css
Kiitos palautteestasi!
