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 egenskab
Det er muligt at styre, hvor mange gange en animation skal afspilles. `animation-iteration-count` angiver, hvor mange gange animationen gentages.
```css 
animation-iteration-count: number_without_units
```
Det er også muligt at angive nøgleordet `infinite` som værdi. Så vil animationen køre uendeligt.
Overvej følgende eksempel for at se, hvordan antallet af animationer kan påvirkes:

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

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCmltZyB7CiAgYW5pbWF0aW9uLW5hbWU6IHNwaW5uZXI7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAzczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7Cn0KCkBrZXlmcmFtZXMgc3Bpbm5lciB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7CiAgfQp9Cgouc2Vjb25kLWltYWdlIHsKICBhbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiA1Owp9CgoudGhpcmQtaW1hZ2UgewogIGFuaW1hdGlvbi1pdGVyYXRpb24tY291bnQ6IGluZmluaXRlOwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KLmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKICB3aWR0aDogMTAwJTsKfQoKLml0ZW0gewogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIHdpZHRoOiAyMDBweDsKICBwYWRkaW5nOiAxMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9CgpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgZm9udC1zaXplOiAxOHB4OwogIG1hcmdpbi10b3A6IDA7Cn0=

### animation-direction egenskab
`animation-direction` styrer animationens retning. Den bestemmer, om en animation skal afspilles forlæns, baglæns eller skiftevis forlæns og baglæns.
```css
animation-direction: normal | reverse | alternate | alternate-reverse
```
- `normal` - standardværdi. Animationen afspilles forlæns fra begyndelsen til slutningen;
- `reverse` - Animationen afspilles baglæns fra slutningen til begyndelsen;
- `alternate` - Animationen afspilles forlæns og derefter baglæns, skiftevis mellem de to retninger;
- `alternate-reverse` - Animationen afspilles baglæns og forlæns, skiftevis mellem de to retninger.

Lad os se, hvilken effekt vi kan opnå i det følgende eksempel. Vi har et billede, hvor standardadfærden er gentagne gange at bevæge sig fra venstre mod højre. Vi kan dog ændre denne adfærd. Vi vil teste alle fire værdier for `animation-direction` egenskaben.

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

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCmltZyB7CiAgYW5pbWF0aW9uLW5hbWU6IGhvcml6b250YWwtdHJhbnNsYXRpb247CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAzMDAwbXM7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyOwogIGFuaW1hdGlvbi1pdGVyYXRpb24tY291bnQ6IGluZmluaXRlOwp9CgpAa2V5ZnJhbWVzIGhvcml6b250YWwtdHJhbnNsYXRpb24gewogIDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDU0MHB4KTsKICB9Cn0KCi5pbWFnZS1vbmUgewogIGFuaW1hdGlvbi1kaXJlY3Rpb246IG5vcm1hbDsKfQoKLmltYWdlLXR3byB7CiAgYW5pbWF0aW9uLWRpcmVjdGlvbjogcmV2ZXJzZTsKfQoKLmltYWdlLXRocmVlIHsKICBhbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGU7Cn0KCi5pbWFnZS1mb3VyIHsKICBhbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGUtcmV2ZXJzZTsKfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDY0MHB4Owp9CgpwIHsKICBtYXJnaW4tdG9wOiAwOwp9

Opgradér dine stylingfærdigheder ved at mestre avancerede CSS-teknikker til moderne webdesign. Positionér og håndter elementer med præcision ved hjælp af avancerede positioneringsstrategier. Skab glidende overgange og engagerende animationer for at forbedre brugeroplevelsen. Transformér og manipuler elementer for dynamiske visuelle effekter. Byg responsive designs, der tilpasser sig på tværs af enheder, og lær at effektivisere din arbejdsgang med CSS preprocessorer som Sass.

Undersøg, hvad deltagerne kan forvente af dette kursus i avanceret HTML og CSS-styling. Hvilke forudsætninger kræves, før du starter kurset? Hvilke emner vil blive dækket?

Placering og håndtering af elementer på websider. Lær om de forskellige positioneringsegenskaber, opdag hvordan stablingsrækkefølgen bruges til at kontrollere synligheden af overlappende elementer, og håndter til sidst indholds-overløb.

Undersøg styrken ved overgange og lær, hvordan brugeroplevelsen kan forbedres. Opdag, hvordan egenskaber kan animeres glidende og gradvist for at skabe sømløse tilstandsskift.

Lær om animation-egenskaben, og hvordan den kan bruges til at skabe dynamiske og engagerende designs. Opdag, hvordan man opretter komplekse animationer ved hjælp af keyframes, og hvordan man styrer animationen.

Undersøg transform-egenskaben, som muliggør ændring af udseende og placering af elementer på en webside. Lær hvordan man skalerer, roterer, skæver og flytter elementer i to og tre dimensioner. Kombinér flere transformationer for at skabe mere komplekse effekter.

Principperne og teknikkerne, der anvendes i adaptivt/responsivt design, har til formål at gøre websites og applikationer tilgængelige og visuelt tiltalende på tværs af forskellige enheder, skærmstørrelser og orienteringer.

Lær om præprocessorer i CSS, og hvordan de kan hjælpe med at skrive mere effektiv og vedligeholdelsesvenlig kode. Forstå, hvordan præprocessorer kan forenkle arbejdsgangen og generere mere overskuelig CSS-kode.

Kontrol af Animation Iteration og Retning

animation-iteration-count egenskab

animation-direction egenskab

Awesome!

Kontrol af Animation Iteration og Retning

animation-iteration-count egenskab

animation-direction egenskab