Overganger for flere egenskaper
Bruk overganger på flere CSS-egenskaper samtidig ved hjelp av kommaseparerte verdier.
Overganger for flere egenskaper er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 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.
Hvorfor overganger for flere egenskaper?
Interaksjoner i brukergrensesnitt innebærer ofte at flere egenskaper endres samtidig – bakgrunnsfarge, skygge og skalering ved hover. CSS støtter uavhengig easing og varighet for hver egenskap.
Kommaseparerte overganger
Oppgi flere overganger med komma. Hver oppføring gjelder én egenskap uavhengig av de andre:
<div class="card">Card</div>Ulik varighet per egenskap
Gi hver egenskap ulik hastighet for en lagdelt og naturlig følelse:
<button class="btn">Hover-ready button</button>Ulik easing per egenskap
Kombiner easing-funksjoner slik at hver egenskap får en passende følelse:
<div class="modal">Modal content</div>transition: all – ulemper
Bruk av transition: all betyr at alle egenskaper som endres, får samme tidsinnstillinger. Dette kan føre til uønskede animasjoner for egenskaper som bør hoppe direkte, for eksempel display- eller posisjonsendringer.
Avbrytbare overganger
CSS-overganger kan avbrytes. Hvis hover-tilstanden avsluttes midt i overgangen, reverseres overgangen fra den gjeldende animerte verdien, ikke fra sluttverdien. Dette gir jevne reverseringer uten brå hopp.
Samordne inn- og utgang
Bruk ulik varighet for hover-inn og hover-ut ved å overstyre overganger i :hover-tilstanden:
<div class="card demo-active">Card</div>Forskyvning med delay
Legg til stadig lengre forsinkelser for søskenelementer for å få en sekvensvisningseffekt:
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>Egendefinerte CSS-egenskaper for forskyvning
Angi forskyvningsforsinkelsen fra en egendefinert CSS-egenskap som settes via JavaScript eller HTML:
<div class="item">Item</div>Overgang kontra animasjon
Bruk overganger for endringer mellom to tilstander (inaktiv → hover). Bruk @keyframes-animasjoner for flertrinns sekvenser, gjentakende effekter eller animasjoner som starter av seg selv.
Optimalisering med will-change
Gi nettleseren et hint om hvilke egenskaper som skal animeres, slik at forhåndsoptimalisering blir mulig. Bruk dette med måte – det bruker GPU-minne.
<div class="card">Card</div>Kort sjekk
Et kort har transition: background 150ms, transform 250ms på basistilstanden. Hva skjer hvis brukeren raskt flytter pekeren bort midt i animasjonen?
Oppsummering
Kommaskilte overganger gjør at hver egenskap kan ha sin egen varighet, easing og forsinkelse. Unngå transition: all – det kan animere egenskaper som ikke var ment å animeres. Overganger kan avbrytes og reverseres jevnt fra den nåværende posisjonen. Bruk forsinkelser for forskjøvne effekter.
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 «Overganger for flere egenskaper» gratis?
Ja – hele teksten i «Overganger for flere egenskaper» 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 «Overganger for flere egenskaper»?
Bruk overganger på flere CSS-egenskaper samtidig ved hjelp av kommaseparerte verdier. 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 3 av 4.
Hvor lang tid tar leksjonen «Overganger for flere egenskaper»?
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