Varighet og tidsstyring for overganger
Definer hvilke egenskaper som skal animeres, hvor lang tid det tar, og når det starter ved hjelp av delay.
Varighet og tidsstyring for overganger er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva er en CSS-overgang?
En CSS-overgang interpolerer mellom to egenskapsverdier over en angitt varighet når verdien endres (for eksempel ved hover). JavaScript er ikke nødvendig.
transition-property
Angir hvilke CSS-egenskaper som skal animeres. Bruk all for å overføre alle egenskaper som kan animeres, eller oppgi bestemte egenskaper.
<button>Save changes</button>transition-duration
Angir hvor lenge overgangen varer. Godtar tidsverdier i sekunder (s) eller millisekunder (ms).
<div class="card">Card</div>Kortformen transition
Kombinerer alle fire under-egenskapene for transition: property | duration | timing-function | delay.
<button class="btn">Submit</button>Flere overganger
Oppgi flere overganger, atskilt med komma, for å animere ulike egenskaper uavhengig av hverandre:
<div class="card">Card</div>transition-delay
Forsinker starten på overgangen. Nyttig når animasjoner skal sekvenseres, eller når én overgang skal fullføres før en annen starter.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>Transition på basistilstanden
Plasser alltid transition-egenskapen på basistilstanden, ikke på :hover-tilstanden. Da spilles overgangen både når pekeren går inn i og ut av hover-tilstanden.
<button class="btn demo-active">Hover me</button>Hva kan animeres med overganger?
De fleste numeriske CSS-egenskaper kan animeres med overganger: farger, dimensjoner, opasitet, transformasjoner og så videre. Diskrete egenskaper (som display) kan ikke interpoleres jevnt – de hopper direkte.
transition: all – advarsel
Bruk av transition: all kan føre til uventede animasjoner av egenskaper som ikke er ment å animeres. Angi alltid egenskapene eksplisitt i produksjonskode.
Overganger for farger
Fargeoverganger interpolerer mellom verdier. Bruk samme fargeformat for best mulig resultat:
<button class="btn demo-active">Hover me</button>Overganger og layoutberegning
Unngå egenskaper som utløser layoutberegning, som width, height, margin og padding, av hensyn til ytelsen. De fører til ny layoutberegning for hver animasjonsramme. Bruk heller transform og opacity.
Kort sjekk
Hvor bør transition-egenskapen plasseres for å sikre at overgangen spilles både når pekeren går inn i og ut av hover-tilstanden?
Oppsummering
CSS-overganger jevner ut endringer i egenskaper over tid ved hjelp av transition-property, duration, timing-function og delay. Plasser overganger på basistilstanden for animasjon i begge retninger. Foretrekk lister over bestemte egenskaper fremfor all for bedre ytelse og forutsigbarhet.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Varighet og tidsstyring for overganger» gratis?
Ja – hele teksten i «Varighet og tidsstyring for overganger» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Varighet og tidsstyring for overganger»?
Definer hvilke egenskaper som skal animeres, hvor lang tid det tar, og når det starter ved hjelp av delay. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Varighet og tidsstyring for overganger»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Varighet og tidsstyring for overganger
- Utjevningsfunksjoner: ease linear cubic-bezier
- Overganger for flere egenskaper
- Ytelse: egenskaper som kan transformeres kontra egenskaper som utløser ny gjengivelse