Animatierichting, fill-mode en iteraties
Bepaal de afspeelrichting van animaties, hoe vaak ze worden herhaald en de eindstatus met fill-mode.
Animatierichting, fill-mode en iteraties is een gratis CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
animation-iteration-count
Bepaalt hoe vaak de animatie wordt herhaald. Gebruik infinite voor een doorlopende herhaling.
<div class="spinner"></div>
<div class="pulse"></div>
animation-direction
Bepaalt de afspeelrichting tijdens afwisselende cycli:
normal— speelt elke herhaling vooruit afreverse— speelt achteruit afalternate— afwisselend vooruit en achteruitalternate-reverse— eerst achteruit en daarna vooruit
<div class="bounce"></div>
animation-fill-mode
Bepaalt wat er met het element gebeurt voordat de animatie begint en nadat deze is afgelopen:
none— standaardwaarde, keert terug naar de oorspronkelijke toestandforwards— behoudt het laatste keyframe na afloopbackwards— past het eerste keyframe toe tijdens de vertragingboth— past zowel backwards als forwards toe
Vulmodus forwards
De meest voorkomende toepassing — houd het element na afloop van de animatie in de geanimeerde eindtoestand:
<p class="item">I fade in and stay visible</p>
Vulmodus backwards
Bij een vertraging zorgt backwards ervoor dat het element tijdens de vertragingsperiode in de toestand van het eerste keyframe begint. Zo voorkom je dat de oorspronkelijke toestand kort zichtbaar wordt voordat de animatie begint:
<p class="item">Starts invisible during the delay</p>
Vulmodus both
both combineert forwards en backwards — de voorspelbaarste optie voor geanimeerde elementen die vóór of na de animatie niet kort zichtbaar mogen flitsen.
animation-delay
Stelt het begin van een animatie uit. Met negatieve vertragingen begint de animatie halverwege — handig om meerdere animaties te synchroniseren:
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
Patroon voor trapsgewijze animaties
Een trapsgewijze animatie die alleen CSS gebruikt, met vertragingen via nth-child:
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
Pauzeren en hervatten
Schakel de animatietoestand met JavaScript om door animation-play-state te wijzigen:
<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>
Animaties opnieuw instellen
Als je een CSS-animatie opnieuw wilt afspelen, verwijder je de klasse en voeg je deze opnieuw toe. De browser gebruikt hierbij een truc: forceer tussen het verwijderen en toevoegen een nieuwe lay-outberekening.
<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>
Negatieve animation-delay
Start een animatie halverwege met een negatieve vertraging — handig voor gesynchroniseerde achtergrondpatronen of herhalende elementen die al in beweging moeten lijken.
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
Korte controle
Welke waarde van animation-fill-mode houdt het element na afloop van de animatie in de toestand van het laatste keyframe?
Samenvatting
animation-iteration-count: infinite wordt eindeloos herhaald. animation-direction: alternate beweegt heen en weer. animation-fill-mode: forwards behoudt de eindtoestand. animation-fill-mode: both is de veiligste optie. Gebruik negatieve vertragingen om gesynchroniseerde animaties ten opzichte van elkaar te verschuiven.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Animatierichting, fill-mode en iteraties” gratis?
Ja — de volledige tekst van “Animatierichting, fill-mode en iteraties” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Animatierichting, fill-mode en iteraties”?
Bepaal de afspeelrichting van animaties, hoe vaak ze worden herhaald en de eindstatus met fill-mode. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Animatierichting, fill-mode en iteraties”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Syntaxis van @keyframes en de animation-eigenschap
- Animatierichting, fill-mode en iteraties
- Animaties koppelen en sequentiëren
- Toegankelijke animaties met prefers-reduced-motion