Summary  
This chapter covers how to configure the timing aspects of animations using CSS properties—animation-duration, animation-delay, and animation-timing-function—to control how long an animation runs, when it starts, and how it accelerates or decelerates.

General domain of usage  
Front-end web development

Lad os overveje alle mulige måder at arbejde med animationstid på.

### animation-duration egenskab
`animation-duration` angiver den tid, der kræves for, at en animation fuldfører én cyklus (ændring fra start- til sluttilstand), målt i enten sekunder (`s`) eller millisekunder (`ms`).
```css
animation-duration: 3s | 3000ms
```

Kør følgende eksempel og hold musen over boksen:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MXM8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4yczwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjVzPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgxKSB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAxczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDIpIHsKICBhbmltYXRpb24tZHVyYXRpb246IDJzOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMykgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogNXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-timing-function egenskab 
`animation-timing-function` bestemmer, hvordan animationen udvikler sig over tid, og styrer animationens acceleration og deceleration. `animation-timing-function` kan have de samme værdier som egenskaben `transition-timing-function`. Flere foruddefinerede timing-funktioner er tilgængelige, såsom `linear`, `ease` og `ease-in-out`, eller der kan defineres en brugerdefineret kubisk bezier-kurve ved hjælp af funktionen `cubic-bezier()`.
```css
animation-timing-function: time_function
```
Anvend forskellige time_functions på boksene i eksemplet:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+ZWFzZTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPmVhc2UtaW48L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij5lYXNlLW91dDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW47Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1vdXQ7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-delay egenskab
`animation-delay` angiver den tid, der skal gå, før animationen starter. Den kan angives i sekunder (`s`) eller millisekunder (`ms`).
```css
animation-delay: 0.1s | 100ms
```
Forskellige forsinkelser anvendes på boksene i eksemplet:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MTAwbXM8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4zMDBtczwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjEwMDBtczwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tZGVsYXk6IDEwMG1zOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi1kZWxheTogMzAwbXM7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLWRlbGF5OiAxMDAwbXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

Vi kan angive tidsforsinkelsen for, hvornår animationen starter, varigheden for hvor længe animationen kører, samt animationens forløb over tid.

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.

Definering af Animationens Varighed og Timing

animation-duration egenskab

animation-timing-function egenskab

animation-delay egenskab

Awesome!

Definering af Animationens Varighed og Timing

animation-duration egenskab

animation-timing-function egenskab

animation-delay egenskab