Transitions: egenskab, varighed og timing
Tilføj transition for at animere ændringer i CSS-egenskaber jævnt, vælg passende varigheder, og vælg easing-funktioner såsom ease-in-out.
Transitions: egenskab, varighed og timing er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er en CSS-overgang?
En CSS-overgang animerer en egenskab fra én værdi til en anden, når den ændres (ved hover, fokus eller når en klasse slås til eller fra). Den er deklarativ — du fortæller CSS, hvilke egenskaber der skal overgå, og hvordan; browseren klarer resten.
Grundlæggende syntaks
transition: property duration timing-function delay. Du kan angive flere overgange adskilt af kommaer.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeVærdien for egenskaben
Angiv, hvilke egenskaber der skal overgå. Brug all til at overgå alle egenskaber, der kan animeres — men det kan udløse uønskede overgange for uvedkommende egenskaber. Vær eksplicit af hensyn til ydeevne og forudsigelighed.
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }Varighed — hvor længe
Overgangens varighed angives i s (sekunder) eller ms (millisekunder). Brug korte varigheder (100–200 ms) til mikrointeraktioner, mellemvarigheder (200–400 ms) til ændringer i komponenttilstande og længere varigheder (400 ms eller mere) til animationer på sideniveau.
Tidsfunktioner — oplevelsen
Tidsfunktioner styrer accelerationskurven. Almindelige værdier er ease (standard: langsom start, hurtig midte, langsom afslutning), linear (konstant hastighed), ease-in (starter langsomt), ease-out (slutter langsomt) og ease-in-out. Brugerdefinerede kurver skrives som cubic-bezier(x1, y1, x2, y2).
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }Forsinkelse — Hvornår animationen starter
En transition-forsinkelse starter animationen efter et angivet tidsrum. Brug den til at forskyde flere elementer eller undgå utilsigtede aktiveringer, når musen bevæges hurtigt.
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}Hændelsen transitionend
JavaScript kan lytte efter, at en transition er færdig, med hændelsen transitionend. Det er nyttigt til at fjerne elementer efter en udtoning eller udløse det næste trin i en sekvens.
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});Transformation af elementer
Egenskaben transform er GPU-accelereret og ideel til transitions. Almindelige transformationer er: translate(), scale(), rotate(), skew(). Animation af transform og opacity udløser kun kompositering — den hurtigste vej.
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}Hvad kan animeres?
Alle egenskaber med en numerisk værdi kan animeres: opacity, farve, transform, width, height, padding, border, font-size. Egenskaber som display og visibility animeres ikke jævnt — brug i stedet opacity til ind- og udtoning.
Praktisk: Modal, der fader ind
En modal, der fader ind og skaleres op fra en lidt mindre størrelse. Anvend klassen .open med JavaScript; CSS håndterer animationen.
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}Ydeevne: Hold dig til transform og opacity
Animation af egenskaber, der udløser layout (width, height, margin, top, left), er ressourcekrævende — browseren genberegner layoutet for hvert billede. Hold dig til transform og opacity for jævne animationer med 60 billeder i sekundet.
Hurtigt tjek
Hvilken CSS-egenskab bør du foretrække at animere for at opnå den bedste ydeevne?
Opsummering: CSS-transitions
transition: property duration timing delay. Animér specifikke egenskaber, ikke 'all'. ease, ease-out, ease-in-out giver naturlige bevægelser. Lyt efter transitionend for at kæde handlinger sammen. Hold dig til transform og opacity af hensyn til ydeevnen. Brug klasseskift i JS til at udløse transitions.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Transitions: egenskab, varighed og timing” gratis?
Ja — hele teksten til “Transitions: egenskab, varighed og timing” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Transitions: egenskab, varighed og timing”?
Tilføj transition for at animere ændringer i CSS-egenskaber jævnt, vælg passende varigheder, og vælg easing-funktioner såsom ease-in-out. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Transitions: egenskab, varighed og timing”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- CSS custom properties: deklarering og opdatering
- Transitions: egenskab, varighed og timing
- @keyframes-animationer
- Respektér prefers-reduced-motion