Animation-iteration-count xususiyati
animation-iteration-count xususiyati
animatsiyaning takrorlanish sonini belgilaydi. Standart holatda
animatsiya faqat 1 marta takrorlanadi va
keyin boshlang‘ich holatiga qaytadi.
Bizning xususiyatimiz, shu bilan birga, ma’lum bir
takrorlanish sonini belgilashga yoki umuman
cheksiz takrorlanishni belgilashga imkon beradi.
Sintaksis
selector {
animation-iteration-count: butun yoki kasr son | infinite;
}
Qiymatlar
| Qiymat | Tavsif |
|---|---|
| Son |
Belgilangan takrorlanishlar soni, ular bajarilgandan so‘ng animatsiya to‘xtaydi.
U egallaydigan holat, animation-fill-mode
xususiyati tomonidan boshqariladi.
Kasr qiymatlarni ham belgilash mumkin - bu holda animatsiya
faqat qisman ijro etiladi.
|
infinite |
Animatsiya cheksiz takrorlanadi. |
Standart qiymat: 1.
Misol . Chekli takrorlanishlar soni
Ushbu misolda animatsiya faqat
3 marta takrorlanadi, so‘ngra boshlang‘ich
holatiga qaytadi:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 3;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Misol . Infinite qiymati
Endi esa animatsiya cheksiz takrorlanadi:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Shuningdek qarang
-
animation-namexususiyati,
animatsiya nomini belgilaydi -
animation-durationxususiyati,
animatsiya davomiyligini belgilaydi -
animation-delayxususiyati,
animatsiyani bajarishdan oldin kechikishni belgilaydi -
animation-timing-functionxususiyati,
animatsiya bajarish tezligini belgilaydi -
animation-directionxususiyati,
animatsiya yo‘nalishini belgilaydi -
animation-fill-modexususiyati,
animatsiya holatini belgilaydi -
animation-play-statexususiyati,
animatsiyani pauzaga qo‘yishga imkon beradi -
animationxususiyati,
animatsiyalar uchun qisqartma hisoblanadi -
@keyframeskomandasi,
animatsiya kalit kadrlarini belgilaydi -
transitionsilliq o‘tishlar, element ustiga sichqoncha olib borilganda amalga oshiriladigan animatsiyani ifodalaydi