## Oppgave
Forbedre det visuelle uttrykket til autorisasjonsskjemaet ved å legge til en animasjon på "Logg inn"-knappen. Følg disse trinnene:

1. Angi riktig verdi for `animation-name`-egenskapen, ved å bruke de forhåndsdefinerte tilstandsforandringene definert i `@keyframes`-regelen med navnet `colorChange`.
2. Sett tidsfunksjonen til `linear` for å sikre jevn hastighet gjennom hele animasjonen.
3. Definer en varighet for animasjonen på `6000ms`.
4. Konfigurer animasjonen til å gjentas `infinite` ganger for en kontinuerlig effekt.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxmb3JtIGNsYXNzPSJmb3JtIj4KICAgICAgICA8bGFiZWwgZm9yPSJtYWlsIiBjbGFzcz0ibGFiZWwiPiBFbWFpbCA8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJlbWFpbCIgaWQ9Im1haWwiIGNsYXNzPSJpbnB1dCIgLz4KICAgICAgICA8bGFiZWwgZm9yPSJwYXNzd29yZCIgY2xhc3M9ImxhYmVsIj4gUGFzc3dvcmQgPC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0icGFzc3dvcmQiIGlkPSJwYXNzd29yZCIgY2xhc3M9ImlucHV0IiAvPgogICAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0IiBjbGFzcz0iYnV0dG9uIj5Mb2cgaW48L2J1dHRvbj4KICAgICAgPC9mb3JtPgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LmJ1dHRvbiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIGNvbG9yOiAjMDBmZmNhOwogIGZvbnQtc2l6ZTogMjRweDsKICBmb250LXdlaWdodDogNTAwOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogIzBhNGQ2ODsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87CiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCiAgYW5pbWF0aW9uLW5hbWU6IF9fXzsKICBfX186IGxpbmVhcjsKICBfX186IF9fXzsKICBfX186IF9fXzsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKQGtleWZyYW1lcyBjb2xvckNoYW5nZSB7CiAgMCUgewogICAgYmFja2dyb3VuZC1jb2xvcjogIzBhNGQ2ODsKICB9CiAgMjUlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICMwODgzOTU7CiAgfQogIDUwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDViZmRiOwogIH0KICA3NSUgewogICAgYmFja2dyb3VuZC1jb2xvcjogIzA4ODM5NTsKICB9CiAgMTAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMGE0ZDY4OwogIH0KfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIHBhZGRpbmc6IDIwcHg7CiAgd2lkdGg6IDM0MHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY0ZjQ7CiAgYm9yZGVyLXJhZGl1czogNXB4Owp9CgouZm9ybSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwp9CgoubGFiZWwgewogIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgZm9udC13ZWlnaHQ6IDUwMDsKICBmb250LXNpemU6IDI0cHg7CiAgY29sb3I6ICM4YzkzOTc7Cn0KCi5pbnB1dCB7CiAgY29sb3I6ICMyMTIxMjE7CiAgb3V0bGluZTogbm9uZTsKICBtYXJnaW4tYm90dG9tOiAzMHB4OwogIGJvcmRlcjogMnB4IHNvbGlkICM4YzkzOTc7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIHBhZGRpbmc6IDhweDsKICBmb250LXNpemU6IDI0cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7Cn0=

1. Angi navnet på `@keyframes`-regelen som verdien for `animation-name`-egenskapen.
2. Spesifiser `linear` som verdien for `animation-timing-function`-egenskapen for å sikre jevn hastighet.
3. Sett `animation-duration`-egenskapen til `6000ms` for å bestemme varigheten på animasjonen.
4. Bruk `infinite` som verdien for `animation-iteration-count`-egenskapen for å gjenta animasjonen uendelig.

LmJ1dHRvbiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIGNvbG9yOiAjMDBmZmNhOwogIGZvbnQtc2l6ZTogMjRweDsKICBmb250LXdlaWdodDogNTAwOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogIzBhNGQ2ODsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87CgogIGFuaW1hdGlvbi1uYW1lOiBjb2xvckNoYW5nZTsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiA2MDAwbXM7CiAgYW5pbWF0aW9uLWl0ZXJhdGlvbi1jb3VudDogaW5maW5pdGU7Cn0KCkBrZXlmcmFtZXMgY29sb3JDaGFuZ2UgewogIDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICMwYTRkNjg7CiAgfQogIDI1JSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDg4Mzk1OwogIH0KICA1MCUgewogICAgYmFja2dyb3VuZC1jb2xvcjogIzA1YmZkYjsKICB9CiAgNzUlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICMwODgzOTU7CiAgfQogIDEwMCUgewogICAgYmFja2dyb3VuZC1jb2xvcjogIzBhNGQ2ODsKICB9Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBtYXJnaW46IDAgYXV0bzsKICBwYWRkaW5nOiAyMHB4OwogIHdpZHRoOiAzNDBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjRmNGY0OwogIGJvcmRlci1yYWRpdXM6IDVweDsKfQoKLmZvcm0gewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKfQoKLmxhYmVsIHsKICBtYXJnaW4tYm90dG9tOiAxMHB4OwogIGZvbnQtd2VpZ2h0OiA1MDA7CiAgZm9udC1zaXplOiAyNHB4OwogIGNvbG9yOiAjOGM5Mzk3Owp9CgouaW5wdXQgewogIGNvbG9yOiAjMjEyMTIxOwogIG91dGxpbmU6IG5vbmU7CiAgbWFyZ2luLWJvdHRvbTogMzBweDsKICBib3JkZXI6IDJweCBzb2xpZCAjOGM5Mzk3OwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiA4cHg7CiAgZm9udC1zaXplOiAyNHB4OwogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwp9

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.

Utfordring: Implementere CSS-animasjon

Oppgave

Awesome!

Utfordring: Implementere CSS-animasjon

Oppgave