webutviklingNybegynner

CSS-animasjoner

Bevegelse som betyr noe — transitions, transform og keyframes.

Neste steg etter HTML og CSS-grunnkurset. Du lærer å gjøre grensesnitt levende med myke overganger, transform og selvspillende keyframes — og hvordan du respekterer dem som ikke vil ha bevegelse. Alt kjøres rett i nettleseren.

Leksjoner: 8
Timer: ~1,8
Nivå: Nybegynner
Start: Gratis

Kurs-intro

32 sekunder om hva kurset er, og hvordan det fungerer.

Leses av en syntetisk stemme (Microsoft Edge TTS, norsk bokmål).

Prøv en smakebit nå

Hold pekeren over boksen i forhåndsvisningen — ren CSS i bevegelse. Endre gradene eller farten og kjør igjen.

Trykk «Kjør» for å se resultatet.

Du skal lære

Gjøre endringer myke med transition — rett egenskap, riktig varighet
Flytte, skalere og rotere med transform — uten å røre layouten
Bygge selvspillende animasjoner med @keyframes og animation
Respektere prefers-reduced-motion — bevegelse for dem som vil, ro for dem som trenger det

Dette kurset passer for deg

Du har fullført HTML og CSS-grunnkurset — eller kan CSS-basene
Du vil at sidene dine skal føles ferdige, ikke bare fungere
Du lærer best av å skrive koden selv og se resultatet med én gang

Læringsstien

Fra første linje til mållinjen — slik kurset henger sammen.

Start her

Leksjonene bygger på hverandre — ta dem i rekkefølge, eller hopp til det du trenger.

1Lesing12 minNeste oppHvorfor ting beveger segBevegelse som tilbakemelding — og når du bør la være.Gratis
2Øvelse15 minTransitions — myke overgangerGjør endringer myke med transition — kortet ditt reagerer på hover.Gratis
Etter leksjon 2 tar de gratis slutt
Lås opp resten av kurset
- De neste 6 leksjonene — øvelser og quizer inkludert
- Alle andre kurs i katalogen, også de som kommer
5 kr/mnd · uten binding · si opp når som helst
3Øvelse15 minTransform — flytt, skaler, snuFlytt, skalér og rotér elementer uten å røre layouten rundt.
4Øvelse16 minKeyframes — animasjoner som spiller selvSelvspillende animasjoner med @keyframes og animation.
5Lesing12 minTiming og easingRiktig fart og kurve gjør bevegelsen naturlig i stedet for mekanisk.
6Lesing10 minBevegelse med respektprefers-reduced-motion — bevegelse for dem som vil, ro for dem som trenger det.
7Øvelse20 minMiniprosjekt: interaktivt kortAlt samlet: et kort som løfter, et ikon som snur, en badge som pulserer.
8Quiz10 minSluttest: CSS-animasjonerSyv spørsmål om transitions, transform, keyframes og reduced motion. Krever 80 %.

Mållinjen

Fullfør alle leksjonene — og bruk det du kan til å bygge noe helt eget. Når du er ferdig venter «JavaScript-grunnkurset».

Neste kurs

Se alle øvelsene i kurset, samlet