Summary  
This chapter explains how to configure CSS transitions by specifying individual or multiple properties (or using “all”) via the transition-property property, alongside setting transition-duration, transition-timing-function, and transition-delay.

General domain of usage  
Web UI styling

Det er muligt at angive enhver CSS-egenskab som en værdi for `transition-property`-egenskaben. Det betyder, at overgangseffekter kan anvendes på enhver egenskab.
```css
transition-property: ... /* any property */
```

Vi arbejder med et par typiske egenskaber, der ofte anvendes til overgange. Egenskaberne `transition-duration`, `transition-timing-function` og `transition-delay` forbliver altid de samme. Alle overgange aktiveres ved markørens hover.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPgogICAgICAgIDxoMz5iYWNrZ3JvdW5kIHRyYW5zaXRpb248L2gzPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCBmaXJzdC1leGFtcGxlIj4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEV2ZW5pZXQKICAgICAgICAgIG1haW9yZXMgbW9sZXN0aWFzLCB0ZW1wb3JhIGxhYm9yaW9zYW0gcXVpYnVzZGFtIHZvbHVwdGF0ZW0hCiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8aDM+Zm9udCBzaXplIHRyYW5zaXRpb248L2gzPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCBzZWNvbmQtZXhhbXBsZSI+CiAgICAgICAgICBMb3JlbSwgaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gUXVvIHNhZXBlCiAgICAgICAgICBudW1xdWFtIGl1cmUgbm9uLiBRdWlhLCBsYWJvcmUhCiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8aDM+Ym9yZGVyIHRyYW5zaXRpb248L2gzPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCB0aGlyZC1leGFtcGxlIj4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFBsYWNlYXQKICAgICAgICAgIGFzcGVyaW9yZXMgZmFjaWxpcyBkb2xvcmlidXMgcmVydW0gcG9zc2ltdXMgc3VzY2lwaXQuCiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8aDM+d2lkdGggdHJhbnNpdGlvbjwvaDM+CiAgICAgICAgPGRpdiBjbGFzcz0iYm94IGZvcnRoLWV4YW1wbGUiPgogICAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRGViaXRpcyBuZW1vCiAgICAgICAgICBhdCByZXBlbGxlbmR1cyBmdWdpdCBhbGlxdWFtIG1hZ25pLgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iaXRlbSI+CiAgICAgICAgPGgzPmNvbG9yIHRyYW5zaXRpb248L2gzPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCBmaWZ0aC1leGFtcGxlIj4KICAgICAgICAgIExvcmVtLCBpcHN1bSBkb2xvciBzaXQgYW1ldCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBSZXB1ZGlhbmRhZSwKICAgICAgICAgIG5vc3RydW0gaXBzdW0hIFBlcnNwaWNpYXRpcyBldCBjb25zZXF1dW50dXIgaWxsdW0uCiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8aDM+b3BhY2l0eSB0cmFuc2l0aW9uPC9oMz4KICAgICAgICA8ZGl2IGNsYXNzPSJib3ggc2l4dGgtZXhhbXBsZSI+CiAgICAgICAgICBMb3JlbSwgaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gU2FlcGUKICAgICAgICAgIGNvcnBvcmlzIHF1YWVyYXQgb21uaXMgZXhlcmNpdGF0aW9uZW0hIERvbG9yLCBwbGFjZWF0IQogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCgouZmlyc3QtZXhhbXBsZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogZ29sZDsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBiYWNrZ3JvdW5kLWNvbG9yOwp9CgouZmlyc3QtZXhhbXBsZTpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmlvbGV0Owp9Cgouc2Vjb25kLWV4YW1wbGUgewogIGZvbnQtc2l6ZTogMTJweDsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBmb250LXNpemU7Cn0KCi5zZWNvbmQtZXhhbXBsZTpob3ZlciB7CiAgZm9udC1zaXplOiAyMnB4Owp9CgoudGhpcmQtZXhhbXBsZSB7CiAgYm9yZGVyOiAycHggc29saWQgcmVkOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IGJvcmRlcjsKfQoKLnRoaXJkLWV4YW1wbGU6aG92ZXIgewogIGJvcmRlcjogNHB4IGRhc2hlZCBncmVlbjsKfQoKLmZvcnRoLWV4YW1wbGUgewogIG91dGxpbmU6IGF1dG87CiAgd2lkdGg6IDEwMCU7CiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogd2lkdGg7Cn0KCi5mb3J0aC1leGFtcGxlOmhvdmVyIHsKICB3aWR0aDogMTAwcHg7Cn0KCi5maWZ0aC1leGFtcGxlIHsKICBjb2xvcjogcmdiKDE0MSwgMzMsIDIxKTsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBjb2xvcjsKfQoKLmZpZnRoLWV4YW1wbGU6aG92ZXIgewogIGNvbG9yOiByb3lhbGJsdWU7Cn0KCi5zaXh0aC1leGFtcGxlIHsKICBvcGFjaXR5OiAxOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IG9wYWNpdHk7Cn0KCi5zaXh0aC1leGFtcGxlOmhvdmVyIHsKICBvcGFjaXR5OiAwLjI7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgouY29udGFpbmVyIHsKICBwYWRkaW5nOiAwcHggMTBweDsKICB3aWR0aDogNzAwcHg7CiAgbWFyZ2luOiAwIGF1dG87CgogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC13cmFwOiB3cmFwOwp9CgouaXRlbSB7CiAgd2lkdGg6IDIwMHB4OwogIGJvcmRlcjogMnB4IHNvbGlkIG9yYW5nZTsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDVweDsKICBtYXJnaW46IDVweDsKfQoKaDMgewogIG1hcmdpbi10b3A6IDBweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4OwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDE2cHg7Cn0KCi5ib3ggewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDEycHg7CiAgdGV4dC1hbGlnbjoganVzdGlmeTsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAzMDBtczsKICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1pbi1vdXQ7CiAgdHJhbnNpdGlvbi1kZWxheTogMTAwbXM7Cn0=

### Flere overgangsegenskaber
Vi kan også bruge værdien `all` for egenskaben `transition-property`, hvilket betyder, at alle egenskaber vil blive animeret.
```css
transition-property: all;
```

I det følgende eksempel ønsker vi at animere ændringen af egenskaberne `background-color`, `color`, `font-weight` og `font-size`. Se venligst filen `index.css`:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBOaWhpbCByZXBlbGxhdAogICAgICB2b2x1cHRhdHVtLCBtYXhpbWUgbWludXMgcXVhcyBuZXF1ZSBpcHNhIG9kaW8gYWQgbGFib3Jpb3NhbSBlYXJ1bS4gQW5pbWksCiAgICAgIHNlZCBmdWdhIGRvbG9yZW1xdWUgbWluaW1hIHF1YW0gcXVpYnVzZGFtIHZvbHVwdGF0ZW0gZGVzZXJ1bnQgaWQuCiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgcGFkZGluZzogMTBweDsKICBmb250LXNpemU6IDE2cHg7CiAgZm9udC13ZWlnaHQ6IDcwMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMTI0LCAxODEsIDIwMCk7CiAgY29sb3I6IHJnYigxNCwgMTQsIDg2KTsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMDAwbXM7CiAgdHJhbnNpdGlvbi1kZWxheTogMTAwbXM7CiAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW47CiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogYWxsOwp9CgouY29udGFpbmVyOmhvdmVyIHsKICBmb250LXNpemU6IDI0cHg7CiAgZm9udC13ZWlnaHQ6IDQwMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMTU4LCAyMDAsIDEyNCk7CiAgY29sb3I6IHJnYigxNTUsIDEyLCAxMik7Cn0=

Hvis vi også har brug for at tilføje en transition til flere egenskaber, men ikke til alle, kan vi angive dem som en værdi for `transition-property`-egenskaben, adskilt med mellemrum. For eksempel:
```css
transition-property: color border height;
```
Det betyder, at transitionen vil blive anvendt på egenskaberne `color`, `border` og `height`.

Hvad bestemmer egenskaben `transition-property`?

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.

Valg af de Rette Transitionsegenskaber

Flere overgangsegenskaber

Awesome!

Valg af de Rette Transitionsegenskaber

Flere overgangsegenskaber