Kontroll av Animeringsupprepning och Riktning
animation-iteration-count-egenskapen
Vi kan styra hur många gånger en animation ska spelas upp. animation-iteration-count anger antalet gånger animationen kommer att upprepas.
animation-iteration-count: number_without_units
Vi kan också ange nyckelordet infinite som värde. Då kommer animationen att köras kontinuerligt.
Låt oss titta på följande exempel och se hur vi kan påverka antalet animationer:
index.html
index.css
animation-direction-egenskapen
animation-direction styr riktningen för animationen. Den avgör om en animation ska spelas framåt, bakåt eller växla mellan framåt och bakåt.
animation-direction: normal | reverse | alternate | alternate-reverse
normal– standardvärde. Animationen spelas framåt från början till slut;reverse– Animationen spelas bakåt från slutet till början;alternate– Animationen spelas framåt och sedan bakåt, växlande mellan de två riktningarna;alternate-reverse– Animationen spelas bakåt och framåt, växlande mellan de två riktningarna.
Låt oss se vilken effekt vi kan uppnå i följande exempel. Vi har en bild där standardbeteendet är att upprepade gånger röra sig från vänster till höger. Vi kan dock ändra dess beteende. Vi kommer att testa alla fyra värden för egenskapen animation-direction.
index.html
index.css
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.04Kontroll av Animeringsupprepning och Riktning
Svep för att visa menyn
animation-iteration-count-egenskapen
Vi kan styra hur många gånger en animation ska spelas upp. animation-iteration-count anger antalet gånger animationen kommer att upprepas.
animation-iteration-count: number_without_units
Vi kan också ange nyckelordet infinite som värde. Då kommer animationen att köras kontinuerligt.
Låt oss titta på följande exempel och se hur vi kan påverka antalet animationer:
index.html
index.css
animation-direction-egenskapen
animation-direction styr riktningen för animationen. Den avgör om en animation ska spelas framåt, bakåt eller växla mellan framåt och bakåt.
animation-direction: normal | reverse | alternate | alternate-reverse
normal– standardvärde. Animationen spelas framåt från början till slut;reverse– Animationen spelas bakåt från slutet till början;alternate– Animationen spelas framåt och sedan bakåt, växlande mellan de två riktningarna;alternate-reverse– Animationen spelas bakåt och framåt, växlande mellan de två riktningarna.
Låt oss se vilken effekt vi kan uppnå i följande exempel. Vi har en bild där standardbeteendet är att upprepade gånger röra sig från vänster till höger. Vi kan dock ändra dess beteende. Vi kommer att testa alla fyra värden för egenskapen animation-direction.
index.html
index.css
Tack för dina kommentarer!
