Summary  
This chapter explains how to configure the number of times an animation repeats and control its playback direction using animation-iteration-count and animation-direction properties.  

General domain of usage  
Web user interface animations

### animation-iteration-count -ominaisuus
Animaation toistokertojen määrän hallinta. `animation-iteration-count` määrittää, kuinka monta kertaa animaatio toistetaan.
```css 
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:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPgogICAgICAgIDxwPldpdGhvdXQgaXRlcmF0aW9uIGNvdW50PC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIGNsYXNzPSJmaXJzdC1pbWFnZSIKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9wbGFuZXQtZWFydGgrKDEpLnBuZyIKICAgICAgICAgIGFsdD0iRWFydGgiCiAgICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8cD5XaXRoIGl0ZXJhdGlvbiBjb3VudCAoNSk8L3A+CiAgICAgICAgPGltZwogICAgICAgICAgY2xhc3M9InNlY29uZC1pbWFnZSIKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9wbGFuZXQtZWFydGgrKDEpLnBuZyIKICAgICAgICAgIGFsdD0iRWFydGgiCiAgICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8cD5XaXRoIGl0ZXJhdGlvbiBjb3VudCAoaW5maW5pdGUpPC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIGNsYXNzPSJ0aGlyZC1pbWFnZSIKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9wbGFuZXQtZWFydGgrKDEpLnBuZyIKICAgICAgICAgIGFsdD0iRWFydGgiCiAgICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCmltZyB7CiAgYW5pbWF0aW9uLW5hbWU6IHNwaW5uZXI7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAzczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7Cn0KCkBrZXlmcmFtZXMgc3Bpbm5lciB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7CiAgfQp9Cgouc2Vjb25kLWltYWdlIHsKICBhbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiA1Owp9CgoudGhpcmQtaW1hZ2UgewogIGFuaW1hdGlvbi1pdGVyYXRpb24tY291bnQ6IGluZmluaXRlOwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KLmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKICB3aWR0aDogMTAwJTsKfQoKLml0ZW0gewogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIHdpZHRoOiAyMDBweDsKICBwYWRkaW5nOiAxMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9CgpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgZm9udC1zaXplOiAxOHB4OwogIG1hcmdpbi10b3A6IDA7Cn0=

### animation-direction -ominaisuus
`animation-direction` ohjaa animaation suuntaa. Se määrittää, toistetaanko animaatio eteenpäin, taaksepäin vai vuorotellen molempiin suuntiin.
```css
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.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxwPmFuaW1hdGlvbi1kaXJlY3Rpb246IG5vcm1hbDwvcD4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJpbWFnZS1vbmUiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvYW5pbWF0aW9ucytzZWN0aW9uL2V4YW1wbGUrZm9yK3RoZSthbmltYXRpb24rZGlyZWN0aW9uK3Byb3BlcnR5LnBuZyIKICAgICAgICBhbHQ9ImRvZyIKICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgIC8+CiAgICA8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxwPmFuaW1hdGlvbi1kaXJlY3Rpb246IHJldmVyc2U8L3A+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0iaW1hZ2UtdHdvIgogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9leGFtcGxlK2Zvcit0aGUrYW5pbWF0aW9uK2RpcmVjdGlvbitwcm9wZXJ0eS5wbmciCiAgICAgICAgYWx0PSJkb2ciCiAgICAgICAgd2lkdGg9IjEwMHB4IgogICAgICAvPgogICAgPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICA8cD5hbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGU8L3A+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0iaW1hZ2UtdGhyZWUiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvYW5pbWF0aW9ucytzZWN0aW9uL2V4YW1wbGUrZm9yK3RoZSthbmltYXRpb24rZGlyZWN0aW9uK3Byb3BlcnR5LnBuZyIKICAgICAgICBhbHQ9ImRvZyIKICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgIC8+CiAgICA8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxwPmFuaW1hdGlvbi1kaXJlY3Rpb246IGFsdGVybmF0ZS1yZXZlcnNlPC9wPgogICAgICA8aW1nCiAgICAgICAgY2xhc3M9ImltYWdlLWZvdXIiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvYW5pbWF0aW9ucytzZWN0aW9uL2V4YW1wbGUrZm9yK3RoZSthbmltYXRpb24rZGlyZWN0aW9uK3Byb3BlcnR5LnBuZyIKICAgICAgICBhbHQ9ImRvZyIKICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgIC8+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCmltZyB7CiAgYW5pbWF0aW9uLW5hbWU6IGhvcml6b250YWwtdHJhbnNsYXRpb247CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAzMDAwbXM7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyOwogIGFuaW1hdGlvbi1pdGVyYXRpb24tY291bnQ6IGluZmluaXRlOwp9CgpAa2V5ZnJhbWVzIGhvcml6b250YWwtdHJhbnNsYXRpb24gewogIDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDU0MHB4KTsKICB9Cn0KCi5pbWFnZS1vbmUgewogIGFuaW1hdGlvbi1kaXJlY3Rpb246IG5vcm1hbDsKfQoKLmltYWdlLXR3byB7CiAgYW5pbWF0aW9uLWRpcmVjdGlvbjogcmV2ZXJzZTsKfQoKLmltYWdlLXRocmVlIHsKICBhbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGU7Cn0KCi5pbWFnZS1mb3VyIHsKICBhbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGUtcmV2ZXJzZTsKfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDY0MHB4Owp9CgpwIHsKICBtYXJnaW4tdG9wOiAwOwp9

Kehitä tyylittelytaitojasi hallitsemalla edistyneet CSS-tekniikat modernia verkkosuunnittelua varten. Sijoita ja hallitse elementtejä tarkasti käyttämällä kehittyneitä asemointistrategioita. Luo sulavia siirtymiä ja mukaansatempaavia animaatioita parantaaksesi käyttökokemusta. Muunna ja käsittele elementtejä dynaamisten visuaalisten tehosteiden saavuttamiseksi. Rakenna responsiivisia suunnitelmia, jotka mukautuvat eri laitteille, ja tehosta työnkulkuasi CSS-esikäsittelijöillä, kuten Sassilla.

Tutustu, mitä oppijat voivat odottaa tältä edistyneen HTML- ja CSS-tyylittelyn kurssilta. Mitä esitietoja tarvitaan ennen kurssin aloittamista? Mitä aiheita kurssilla käsitellään?

Sijoita ja hallitse elementtejä verkkosivuilla. Tutustu erilaisiin sijoitteluominaisuuksiin, opi käyttämään pinontajärjestystä päällekkäisten elementtien näkyvyyden hallintaan sekä käsittele sisällön ylivuotoa.

Tutki siirtymien tehokkuutta ja opi parantamaan käyttökokemusta. Selvitä, kuinka ominaisuuksia voidaan elävöittää sulavasti ja asteittain, luoden saumattomia tilasiirtymiä.

Opi animaatio-ominaisuudesta ja sen käytöstä dynaamisten ja kiinnostavien suunnittelujen luomisessa. Tutustu monimutkaisten animaatioiden luomiseen avainruutujen avulla sekä animaation hallintaan.

Tutustu transformaatio-ominaisuuteen, jonka avulla voidaan muokata elementtien ulkoasua ja sijaintia verkkosivulla. Opiskele, miten elementtejä skaalataan, kierrätetään, vinotaan ja siirretään kahdessa ja kolmessa ulottuvuudessa. Yhdistä useita transformaatioita monimutkaisempien efektien luomiseksi.

Mukautuvan ja responsiivisen suunnittelun periaatteet ja tekniikat tähtäävät siihen, että verkkosivustot ja sovellukset ovat saavutettavia ja visuaalisesti houkuttelevia eri laitteilla, näytön ko'oilla ja suuntauksilla.

Opi CSS-esiprosessoreista ja siitä, miten ne auttavat kirjoittamaan tehokkaampaa ja helpommin ylläpidettävää koodia. Ymmärrä, kuinka esiprosessoreita käytetään työnkulun yksinkertaistamiseen ja siistimmän CSS-koodin tuottamiseen.

Animaation Toistojen ja Suunnan Hallinta

animation-iteration-count -ominaisuus

animation-direction -ominaisuus

Awesome!

Animaation Toistojen ja Suunnan Hallinta

animation-iteration-count -ominaisuus

animation-direction -ominaisuus