Animatie-Iteratie en -Richting Beheren
animation-iteration-count eigenschap
Het aantal keren dat een animatie wordt afgespeeld, kan worden gecontroleerd. animation-iteration-count stelt het aantal herhalingen van de animatie in.
animation-iteration-count: number_without_units
Het is ook mogelijk om het sleutelwoord infinite als waarde op te geven. De animatie blijft dan continu doorgaan.
Bekijk het volgende voorbeeld om te zien hoe het aantal animatieherhalingen kan worden beïnvloed:
index.html
index.css
animation-direction eigenschap
animation-direction bepaalt de richting van de animatie. Het geeft aan of een animatie voorwaarts, achterwaarts of afwisselend voorwaarts en achterwaarts moet worden afgespeeld.
animation-direction: normal | reverse | alternate | alternate-reverse
normal- standaardwaarde. De animatie wordt voorwaarts afgespeeld van het begin tot het einde;reverse- De animatie wordt achterwaarts afgespeeld van het einde tot het begin;alternate- De animatie wordt voorwaarts en daarna achterwaarts afgespeeld, afwisselend tussen beide richtingen;alternate-reverse- De animatie wordt achterwaarts en voorwaarts afgespeeld, afwisselend tussen beide richtingen.
Bekijk het effect in het volgende voorbeeld. Er is een afbeelding waarvan het standaardgedrag is om herhaaldelijk van links naar rechts te bewegen. Dit gedrag kan echter worden aangepast. Alle vier de waarden voor de eigenschap animation-direction worden getest.
index.html
index.css
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you show me an example of how to use animation-iteration-count and animation-direction together?
What does the animation look like with each animation-direction value?
Can you explain the difference between alternate and alternate-reverse with a visual example?
Awesome!
Completion rate improved to 2.04Animatie-Iteratie en -Richting Beheren
Veeg om het menu te tonen
animation-iteration-count eigenschap
Het aantal keren dat een animatie wordt afgespeeld, kan worden gecontroleerd. animation-iteration-count stelt het aantal herhalingen van de animatie in.
animation-iteration-count: number_without_units
Het is ook mogelijk om het sleutelwoord infinite als waarde op te geven. De animatie blijft dan continu doorgaan.
Bekijk het volgende voorbeeld om te zien hoe het aantal animatieherhalingen kan worden beïnvloed:
index.html
index.css
animation-direction eigenschap
animation-direction bepaalt de richting van de animatie. Het geeft aan of een animatie voorwaarts, achterwaarts of afwisselend voorwaarts en achterwaarts moet worden afgespeeld.
animation-direction: normal | reverse | alternate | alternate-reverse
normal- standaardwaarde. De animatie wordt voorwaarts afgespeeld van het begin tot het einde;reverse- De animatie wordt achterwaarts afgespeeld van het einde tot het begin;alternate- De animatie wordt voorwaarts en daarna achterwaarts afgespeeld, afwisselend tussen beide richtingen;alternate-reverse- De animatie wordt achterwaarts en voorwaarts afgespeeld, afwisselend tussen beide richtingen.
Bekijk het effect in het volgende voorbeeld. Er is een afbeelding waarvan het standaardgedrag is om herhaaldelijk van links naar rechts te bewegen. Dit gedrag kan echter worden aangepast. Alle vier de waarden voor de eigenschap animation-direction worden getest.
index.html
index.css
Bedankt voor je feedback!
