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

La oss se på alle mulige måter å arbeide med animasjonstid på.

### animation-duration-egenskapen
`animation-duration` angir tiden det tar for en animasjon å fullføre én syklus (endring fra start- til slutt-tilstand), målt i enten sekunder (`s`) eller millisekunder (`ms`).
```css
animation-duration: 3s | 3000ms
```

Kjør følgende eksempel og hold musepekeren over boksen:

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

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgxKSB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAxczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDIpIHsKICBhbmltYXRpb24tZHVyYXRpb246IDJzOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMykgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogNXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-timing-function-egenskapen 
`animation-timing-function` bestemmer hvordan animasjonen utvikler seg over tid, og kontrollerer akselerasjon og retardasjon av animasjonen. `animation-timing-function` kan ha de samme verdiene som `transition-timing-function`-egenskapen. Flere forhåndsdefinerte tidsfunksjoner er tilgjengelige, som `linear`, `ease` og `ease-in-out`, eller vi kan definere en egendefinert kubisk bezier-kurve ved å bruke funksjonen `cubic-bezier()`.
```css
animation-timing-function: time_function
```
La oss bruke ulike time_functions på boksene i eksempelet:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+ZWFzZTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPmVhc2UtaW48L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij5lYXNlLW91dDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW47Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1vdXQ7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-delay-egenskapen 
`animation-delay` angir tiden som skal gå før animasjonen starter. Den kan spesifiseres i sekunder (`s`) eller millisekunder (`ms`).
```css
animation-delay: 0.1s | 100ms
```
Forskjellige forsinkelser brukes på boksene i eksempelet:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MTAwbXM8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4zMDBtczwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjEwMDBtczwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tZGVsYXk6IDEwMG1zOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi1kZWxheTogMzAwbXM7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLWRlbGF5OiAxMDAwbXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

Vi kan angi tidsforsinkelsen før animasjonen starter, varigheten animasjonen skal kjøre, samt animasjonens fremdrift over tid.

Hev dine ferdigheter innen styling ved å mestre avanserte CSS-teknikker for moderne webdesign. Plasser og håndter elementer med presisjon ved hjelp av avanserte posisjoneringsstrategier. Lag jevne overganger og engasjerende animasjoner for å forbedre brukeropplevelsen. Transformer og manipuler elementer for dynamiske visuelle effekter. Bygg responsive design som tilpasser seg ulike enheter, og effektiviser arbeidsflyten med CSS-preprosessorer som Sass.

Undersøk hva deltakerne kan forvente av dette kurset i avansert HTML og CSS-styling. Hvilke forkunnskaper kreves før du starter kurset? Hvilke emner vil bli dekket?

Posisjonering og håndtering av elementer på nettsider. Lær om ulike posisjonerings-egenskaper, oppdag hvordan du bruker stablingsrekkefølge for å kontrollere synligheten til overlappende elementer, og håndter til slutt innhold som flyter utenfor.

Utforsk kraften i overganger og lær hvordan du kan forbedre brukeropplevelsen. Oppdag hvordan egenskaper kan animeres jevnt og gradvis for å skape sømløse tilstandsendringer.

Lær om animasjonsegenskapen og hvordan den kan brukes til å skape dynamiske og engasjerende design. Oppdag hvordan du kan lage komplekse animasjoner ved hjelp av nøkkelbilder og hvordan du kan kontrollere animasjonen.

Utforsk transformasjonsegenskapen, som gjør det mulig å endre utseendet og posisjonen til elementer på en nettside. Lær hvordan du kan skalere, rotere, skjevstille og flytte elementer i to og tre dimensjoner. Kombiner flere transformasjoner for å skape mer komplekse effekter.

Prinsippene og teknikkene som brukes i adaptivt og responsivt design har som mål å gjøre nettsteder og applikasjoner tilgjengelige og visuelt tiltalende på tvers av ulike enheter, skjermstørrelser og orienteringer.

Lær om forprosessorer i CSS og hvordan de kan bidra til å skrive mer effektiv og vedlikeholdbar kode. Forstå hvordan forprosessorer kan forenkle arbeidsflyten og generere renere CSS-kode.

Definere Animasjonsvarighet og Tidsinnstilling

animation-duration-egenskapen

animation-timing-function-egenskapen

animation-delay-egenskapen

Awesome!

Definere Animasjonsvarighet og Tidsinnstilling

animation-duration-egenskapen

animation-timing-function-egenskapen

animation-delay-egenskapen