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

Vi kan angi hvilken som helst CSS-egenskap som en verdi for `transition-property`-egenskapen. Dette betyr at vi kan bruke overgangseffekt på enhver egenskap.
```css
transition-property: ... /* any property */
```

Vi skal arbeide med noen typiske egenskaper som ofte animeres. Egenskapene `transition-duration`, `transition-timing-function` og `transition-delay` forblir alltid uendret. Alle overganger vil reagere på musepekerens hover.

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

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCgouZmlyc3QtZXhhbXBsZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogZ29sZDsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBiYWNrZ3JvdW5kLWNvbG9yOwp9CgouZmlyc3QtZXhhbXBsZTpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmlvbGV0Owp9Cgouc2Vjb25kLWV4YW1wbGUgewogIGZvbnQtc2l6ZTogMTJweDsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBmb250LXNpemU7Cn0KCi5zZWNvbmQtZXhhbXBsZTpob3ZlciB7CiAgZm9udC1zaXplOiAyMnB4Owp9CgoudGhpcmQtZXhhbXBsZSB7CiAgYm9yZGVyOiAycHggc29saWQgcmVkOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IGJvcmRlcjsKfQoKLnRoaXJkLWV4YW1wbGU6aG92ZXIgewogIGJvcmRlcjogNHB4IGRhc2hlZCBncmVlbjsKfQoKLmZvcnRoLWV4YW1wbGUgewogIG91dGxpbmU6IGF1dG87CiAgd2lkdGg6IDEwMCU7CiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogd2lkdGg7Cn0KCi5mb3J0aC1leGFtcGxlOmhvdmVyIHsKICB3aWR0aDogMTAwcHg7Cn0KCi5maWZ0aC1leGFtcGxlIHsKICBjb2xvcjogcmdiKDE0MSwgMzMsIDIxKTsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBjb2xvcjsKfQoKLmZpZnRoLWV4YW1wbGU6aG92ZXIgewogIGNvbG9yOiByb3lhbGJsdWU7Cn0KCi5zaXh0aC1leGFtcGxlIHsKICBvcGFjaXR5OiAxOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IG9wYWNpdHk7Cn0KCi5zaXh0aC1leGFtcGxlOmhvdmVyIHsKICBvcGFjaXR5OiAwLjI7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgouY29udGFpbmVyIHsKICBwYWRkaW5nOiAwcHggMTBweDsKICB3aWR0aDogNzAwcHg7CiAgbWFyZ2luOiAwIGF1dG87CgogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC13cmFwOiB3cmFwOwp9CgouaXRlbSB7CiAgd2lkdGg6IDIwMHB4OwogIGJvcmRlcjogMnB4IHNvbGlkIG9yYW5nZTsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDVweDsKICBtYXJnaW46IDVweDsKfQoKaDMgewogIG1hcmdpbi10b3A6IDBweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4OwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDE2cHg7Cn0KCi5ib3ggewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDEycHg7CiAgdGV4dC1hbGlnbjoganVzdGlmeTsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAzMDBtczsKICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1pbi1vdXQ7CiAgdHJhbnNpdGlvbi1kZWxheTogMTAwbXM7Cn0=

### Flere overgangsegenskaper
Vi kan også bruke verdien `all` for egenskapen `transition-property`, noe som betyr at alle egenskaper vil få overgangseffekt.
```css
transition-property: all;
```

I det følgende eksempelet ønsker vi å legge til overgang på endring av egenskapene `background-color`, `color`, `font-weight` og `font-size`. Se på filen `index.css`:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBOaWhpbCByZXBlbGxhdAogICAgICB2b2x1cHRhdHVtLCBtYXhpbWUgbWludXMgcXVhcyBuZXF1ZSBpcHNhIG9kaW8gYWQgbGFib3Jpb3NhbSBlYXJ1bS4gQW5pbWksCiAgICAgIHNlZCBmdWdhIGRvbG9yZW1xdWUgbWluaW1hIHF1YW0gcXVpYnVzZGFtIHZvbHVwdGF0ZW0gZGVzZXJ1bnQgaWQuCiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgcGFkZGluZzogMTBweDsKICBmb250LXNpemU6IDE2cHg7CiAgZm9udC13ZWlnaHQ6IDcwMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMTI0LCAxODEsIDIwMCk7CiAgY29sb3I6IHJnYigxNCwgMTQsIDg2KTsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMDAwbXM7CiAgdHJhbnNpdGlvbi1kZWxheTogMTAwbXM7CiAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW47CiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogYWxsOwp9CgouY29udGFpbmVyOmhvdmVyIHsKICBmb250LXNpemU6IDI0cHg7CiAgZm9udC13ZWlnaHQ6IDQwMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMTU4LCAyMDAsIDEyNCk7CiAgY29sb3I6IHJnYigxNTUsIDEyLCAxMik7Cn0=

Hvis vi også trenger å legge til en overgang på flere egenskaper, men ikke på alle, kan vi angi dem som en verdi for `transition-property`-egenskapen, adskilt med mellomrom. For eksempel:
```css
transition-property: color border height;
```
Dette betyr at overgangen vil bli brukt på egenskapene `color`, `border` og `height`.

Hva bestemmer `transition-property`-egenskapen?

Forbedre 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 lær å effektivisere 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.

Velge Riktige Overgangsegenskaper

Flere overgangsegenskaper

Velge Riktige Overgangsegenskaper

Flere overgangsegenskaper