Xüsusiyyət animation-iteration-count
Xüsusiyyət animation-iteration-count
animasiyanın təkrarlanma sayını təyin edir. Standart olaraq
animasiya yalnız 1 dəfə təkrarlanır və
sonra başlanğıc vəziyyətinə qayıdır.
Bizim xüsusiyyətimiz isə müəyyən sayda təkrar
təyin etməyə və ya hətta sonsuz təkrar
təyin etməyə imkan verir.
Sintaksis
selektor {
animation-iteration-count: tam və ya kəsr ədəd | infinite;
}
Dəyərlər
| Dəyər | Təsvir |
|---|---|
| Ədəd |
Təyin olunmuş təkrar sayı, yerinə yetirildikdən sonra animasiya dayanacaq.
Tutacağı mövqe,
animation-fill-mode xüsusiyyəti ilə tənzimlənir.
Kəsr dəyərlər də təyin etmək olar - bu halda animasiya yalnız
qismən oynanılacaq.
|
infinite |
Animasiya sonsuz olaraq təkrarlanacaq. |
Standart dəyər: 1.
Nümunə . Sonlu sayda təkrar
Bu nümunədə animasiya yalnız
3 dəfə təkrarlanacaq, sonra isə başlanğıc
vəziyyətinə qayıdacaq:
<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;
}
:
Nümunə . Infinite dəyəri
İndi isə animasiya sonsuz olaraq təkrarlanacaq:
<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;
}
:
Həmçinin bax
-
xüsusiyyət
animation-name,
animasiyanın adını təyin edir -
xüsusiyyət
animation-duration,
animasiyanın müddətini təyin edir -
xüsusiyyət
animation-delay,
animasiyadan əvvəl gecikməni təyin edir -
xüsusiyyət
animation-timing-function,
animasiyanın yerinə yetirilmə sürətini təyin edir -
xüsusiyyət
animation-direction,
animasiyanın istiqamətini təyin edir -
xüsusiyyət
animation-fill-mode,
animasiyanın vəziyyətini təyin edir -
xüsusiyyət
animation-play-state,
animasiyanı fasiləyə salmağa imkan verir -
xüsusiyyət
animation,
animasiyalar üçün qısa yazılış təmsil edir -
komanda
@keyframes,
animasiyanın əsas kadrlarını təyin edir -
hamar keçidlər
transition, elementin üzərinə gəldikdə baş verən animasiyanı təmsil edir