Kjeding og sekvensering av animasjoner
Opprett komplekse sekvenser ved å kjede flere animasjoner med forskjøvede forsinkelser.
Kjeding og sekvensering av animasjoner 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 lage sekvensielle animasjoner?
Komplekse brukergrensesnitteffekter krever ofte flere animasjoner som skjer i riktig rekkefølge: et element glir inn, blir stående en stund og tones deretter ut. CSS tilbyr flere verktøy for å kjede sammen animasjoner uten JavaScript.
Bruk av animation-delay til sekvensering
Den enkleste formen for sekvensering er å beregne når neste animasjon skal starte, basert på varigheten til den forrige:
<div class="element">Slides in, then fades out</div>
Keyframes med flere trinn
Den ryddigste tilnærmingen for ett enkelt element er å kode hele sekvensen i én @keyframes-regel med prosentvise punkter:
<div class="toast">Notification toast</div>
CSS-variabler for varighet
Lagre varigheter i CSS-variabler for enkel koordinering på tvers av kjedede animasjoner:
<div class="box">Custom-property-driven timing</div>
animation-timeline (moderne)
Web Animations API og rullekoblede animasjoner (ScrollTimeline) muliggjør avansert sekvensering uten beregning av forsinkelser. Dette er fremtiden for avansert orkestrering av CSS-animasjoner.
Forskyvning med egendefinerte CSS-egenskaper
Styr forskyvningsforsinkelser fra egendefinerte CSS-egenskaper som settes inline eller via JavaScript:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
JavaScript-styrt sekvensering
For presise sekvenser med flere elementer kan De bruke Web Animations API eller et bibliotek som GSAP. CSS alene har begrensninger når uavhengige elementer med komplekse avhengigheter skal koordineres.
Oppmerksomhetsanimasjoner
En sekvens der elementet pulserer og deretter faller til ro:
<div class="notification">New message!</div>
animationend-hendelsen
Lytt etter animationend i JavaScript for å utløse neste trinn programmatisk:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
Mønster for sideovergang
En CSS-sekvens for sideoverganger ved å veksle mellom klasser:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
Skjelett for innlastingstilstand
En flertrinns skjelettanimasjon for innlasting ved hjelp av forskyvninger:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
Kort kontroll
Hva er den beste måten å kode en komplett animasjonssekvens med flere trinn for ett enkelt element i CSS?
Oppsummering
CSS-sekvensering av animasjoner bruker forsinkelser som er tidsbestemt etter varigheten til tidligere animasjoner, keyframes med flere trinn og prosentvise punkter, eller variabler for varighet i egendefinerte CSS-egenskaper. Hendelsen animationend gjør det mulig å utløse sekvensielle faser fra JavaScript. For kompleks orkestrering av flere elementer bør De vurdere Web Animations API.
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 «Kjeding og sekvensering av animasjoner» gratis?
Ja – hele teksten i «Kjeding og sekvensering av animasjoner» 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 «Kjeding og sekvensering av animasjoner»?
Opprett komplekse sekvenser ved å kjede flere animasjoner med forskjøvede forsinkelser. 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 «Kjeding og sekvensering av animasjoner»?
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
- Syntaks for @keyframes og animation-egenskapen
- Animasjonsretning, fill-mode og iterasjon
- Kjeding og sekvensering av animasjoner
- Tilgjengelige animasjoner med prefers-reduced-motion