@keyframes-animationer
Definér animationer i flere trin med @keyframes, tilknyt dem med animation-shorthand, og styr gentagelser, retning og fill-mode.
@keyframes-animationer er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 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.
Transitions kontra animationer
Transitions animerer mellem to tilstande, som udløses af en ændring. Animationer med @keyframes kører automatisk, kan gentages, afspilles baglæns, køre uendeligt og definere flere mellemtrin — der kræves ingen udløser.
Definition af @keyframes
Deklarér en animationssekvens med @keyframes. Definér tilstande ved procentsatser (0 %, 50 %, 100 %) eller ved hjælp af nøgleordene from og to.
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}Genvejsnotationen animation
animation: name duration timing-function delay iteration-count direction fill-mode. Anvend animationen på et element med denne genvejsnotation.
.card {
animation: fadeIn 0.4s ease-out forwards;
}
.loader {
animation: pulse 1.5s ease-in-out infinite;
}animation-iteration-count
Angiver, hvor mange gange animationen afspilles. infinite gentager animationen for evigt. Et tal afspiller den præcis så mange gange.
.spinner {
animation: spin 1s linear infinite;
}
.badge {
animation: bounce 0.6s ease 3; /* plays 3 times */
}animation-direction
normal (standard): fremad hver gang. reverse: baglæns. alternate: fremad og derefter baglæns. alternate-reverse. alternate er velegnet til pingpong-effekter.
@keyframes swing {
from { transform: rotate(-15deg); }
to { transform: rotate(15deg); }
}
.pendulum {
animation: swing 1s ease-in-out infinite alternate;
}animation-fill-mode
Styrer elementets tilstand før og efter animationen. forwards: elementet forbliver i tilstanden fra den sidste keyframe. backwards: anvender from-tilstanden under forsinkelsen. both: begge dele.
.entrance {
opacity: 0;
animation: fadeIn 0.5s ease 0.2s forwards;
/* stays visible (opacity: 1) after animation ends */
}animation-play-state
Sæt animationer på pause, og genoptag dem med JavaScript ved at skifte mellem animation-play-state: paused | running.
// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';Flere animationer
Anvend flere animationer på ét element ved at adskille dem med kommaer. Hver animation kører uafhængigt.
.icon {
animation:
rotate 2s linear infinite,
pulse 1.5s ease-in-out infinite alternate;
}Forskudte animationer med animation-delay
Forskyd listeelementer ved at øge forsinkelsen for hvert element. Brugerdefinerede CSS-egenskaber gør dette nemt med JavaScript.
/* CSS */
.list-item {
animation: slideIn 0.3s ease forwards;
animation-delay: calc(var(--index) * 60ms);
}
/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
el.style.setProperty('--index', i);
});will-change — Tip til browseren
will-change: transform antyder over for browseren, at egenskaben vil blive animeret, så den kan flytte elementet til sit eget kompositorlag på forhånd. Brug det sparsomt — for mange kompositorlag spilder GPU-hukommelse.
.animated {
will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');Praktisk: Skeletskærm under indlæsning
Skeletskærme bruger en skinnende animation til at vise, at indholdet indlæses. Et farveforløb bevæger sig hen over pladsholdernes former.
@keyframes shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
#e2e8f0 25%,
#edf2f7 50%,
#e2e8f0 75%
) 200% 0 / 200% 100%;
animation: shimmer 1.5s linear infinite;
}Hurtigt tjek
Hvilken værdi for animation-fill-mode får elementet til at bevare den sidste keyframe-tilstand, efter animationen er afsluttet?
Opsummering: @keyframes-animationer
Definér dem med @keyframes ved hjælp af from/to eller procentsatser. Anvend dem med animation-genvejsnotationen. Brug iteration-count til gentagelser. Brug alternate som retning til pingpong-effekter. Brug fill-mode: forwards til at bevare den sidste tilstand. Forskyd animationer med animation-delay og CSS-variabler. Brug keyframes for transform og opacity til jævne, kompositerede animationer.
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 “@keyframes-animationer” gratis?
Ja — hele teksten til “@keyframes-animationer” 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 “@keyframes-animationer”?
Definér animationer i flere trin med @keyframes, tilknyt dem med animation-shorthand, og styr gentagelser, retning og fill-mode. 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 3 af 4.
Hvor lang tid tager lektionen “@keyframes-animationer”?
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