@keyframes-syntaks og animation-egenskaben
Definér animationstrin med @keyframes, og anvend dem med animation-shorthand.
@keyframes-syntaks og animation-egenskaben er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 1 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 CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad er CSS-animationer?
CSS-animationer gør det muligt at ændre egenskaber i flere trin over tid ved hjælp af @keyframes. I modsætning til overgange starter animationer automatisk eller, når en klasse tilføjes, og de understøtter komplekse sekvenser.
Syntaks for @keyframes
Definér animationstrin ved hjælp af procenter (0 % til 100 %) eller nøgleordene from/to:
<div class="fade-demo">Fades in</div>
<div class="pulse-demo"></div>
Egenskaben animation
Anvend en animation på et element ved hjælp af kortformen animation eller dens underegenskaber:
<h1 class="hero-text">Welcome!</h1>
animation-name
Refererer til @keyframes-reglen ved navn:
<div class="spinner"></div>
animation-duration
Angiver, hvor lang tid én animationscyklus tager:
<div class="pulse"></div>
Flere animationstrin
Brug procentbaserede keyframes til komplekse animationer i flere trin:
<div class="slide-demo">Sliding in</div>
Animering af flere egenskaber
Hvert keyframe-trin kan animere flere egenskaber samtidigt:
<div class="bounce-demo"></div>
animation-timing-function pr. keyframe
Timingfunktionen kan angives for hvert keyframe-trin og styrer easing mellem de enkelte delpunkter i stedet for for hele animationen.
Flere animationer
Anvend flere animationer på ét element ved hjælp af kommaseparerede værdier:
<div class="element">Two animations combined</div>
animation-play-state
Sæt animationer på pause, og genoptag dem dynamisk:
<div class="card">Hover the card to pause<div class="spinner"></div></div>
Oversigt over CSS-animationer og overgange
Vælg med omhu:
- Overgang: to tilstande, udløses af en tilstandsændring, enkel
- Animation: flere trin, starter selv, kan gentages, større kontrol
Hurtigt tjek
Hvilket nøgleord i @keyframes repræsenterer animationens starttilstand?
Opsummering
Definér animationstrin med @keyframes ved hjælp af from/to eller procentbaserede delpunkter. Anvend dem med kortformen animation, hvor du angiver navn, varighed, timing og fill-mode. Flere animationer adskilles med kommaer. Brug overgange til enkle ændringer mellem to tilstande og animationer til komplekse sekvenser.
Lær CSS 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
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “@keyframes-syntaks og animation-egenskaben” gratis?
Ja — hele teksten til “@keyframes-syntaks og animation-egenskaben” 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 CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “@keyframes-syntaks og animation-egenskaben”?
Definér animationstrin med @keyframes, og anvend dem med animation-shorthand. Du øver dig i CSS 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å CSS Academy?
Der kræves ingen tidligere erfaring. CSS 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 1 af 4.
Hvor lang tid tager lektionen “@keyframes-syntaks og animation-egenskaben”?
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 CSS Academy-lektion?
Ja. Alle CSS 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
- @keyframes-syntaks og animation-egenskaben
- Animationsretning, fill-mode og gentagelser
- Kædning og sekvensering af animationer
- Tilgængelige animationer med prefers-reduced-motion