Transitions — myke overganger

Uten transition skjer alle endringer i CSS med ett hopp: fargen er grå, så er den grønn. Med transition blir hoppet til en bevegelse du kan følge. Dette er det mest brukte animasjonsverktøyet i CSS — og det trenger ofte bare én linje.

Tre deler: egenskap, varighet, kurve

En transition svarer på tre spørsmål: hva som skal animeres (transition-property), hvor lenge det tar (transition-duration) og hvordan farten skal fordeles (timing-funksjonen — mer om den i leksjon 5). I praksis skriver du nesten alltid shorthand-en: transition: egenskap varighet kurve;. Vil du animere flere egenskaper med ulik timing, skiller du dem med komma — det er det som skjer i eksempelet under.

1.box {2  transition: background-color 0.3s ease, transform 0.3s ease;3}4 5.box:hover {6  background-color: #7fa98d;7  transform: scale(1.1);8}

Oppgaven

Øvelsen ligger i arbeidsområdet nederst på siden. Der ligger et kort og venter på å våkne. Fem punkt — de svarer direkte til de fem sjekkene i arbeidsområdet:

1. 1.Lag en .kort-regel i style.css — gi kortet en bakgrunnsfarge og litt padding.
2. 2.Lag en :hover-regel for .kort.
3. 3.Legg transition på .kort med en varighet — for eksempel transition: background-color 0.3s ease, transform 0.3s ease;.
4. 4.La hover-regelen endre background-color — velg en farge som tydelig skiller seg ut.
5. 5.La hover-regelen også skalere kortet svakt med transform: scale(1.05);.

Endringen må skje et sted

En transition animerer ingenting av seg selv. Den venter på at en verdi faktisk endrer seg — og endringen må komme fra en tilstand som endres: :hover, :focus, en klasse JavaScript legger på, eller en media query. Står alt stille, står transition stille.

Når alle fem sjekkene er grønne, har du et kort som svarer med en myk bevegelse — det samme grepet som ligger bak de fleste knapper og kort du møter på nettet.