animation-iteration-count касиети
animation-iteration-count касиети
анимациянын кайталануу санын белгилейт. Демейки абалда
анимация 1 гана жолу кайталанып, андан кийин
баштапкы абалга кайтат.
Биздин касиет, бирок, аныкталган
кайталоо санын белгилөөгө же жалпысынан
чексиз кайталоону орнотууга мүмкүндүк берет.
Синтаксис
селектор {
animation-iteration-count: бүтүн же бөлчөк сан | infinite;
}
Маанилер
| Маани | Сүрөттөмө |
|---|---|
| Сан |
Белгиленген кайталоо саны, аяктагандан кийин анимация токтойт.
Ал ээлеген абал
animation-fill-mode касиети менен жөнгө салынат.
Бөлчөк маанилерди да белгилөөгө болот - бул учурда анимация
жарымынан ойнотулат.
|
infinite |
Анимация чексиз кайталанып турат. |
Демейки маани: 1.
Мисал . Чектүү кайталоо саны
Бул мисалда анимация
3 гана жолу кайталанып, андан кийин баштапкы
абалга кайтат:
<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;
}
:
Мисал . Infinite мааниси
Эми анимация чексиз кайталанып турат:
<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;
}
:
Дагы караңыз
-
animation-nameкасиети,
анимациянын атын белгилейт -
animation-durationкасиети,
анимациянын узактыгын белгилейт -
animation-delayкасиети,
анимацияны аткаруудан мурун кечиктирүүнү белгилейт -
animation-timing-functionкасиети,
анимациянын аткарылуу ылдамдыгын белгилейт -
animation-directionкасиети,
анимациянын багытын белгилейт -
animation-fill-modeкасиети,
анимациянын абалын белгилейт -
animation-play-stateкасиети,
анимацияны токтотууга мүмкүндүк берет -
animationкасиети,
анимациялар үчүн кыскартылган түрү -
@keyframesкомандасы,
анимациянын негизги кадрларын белгилейт -
transitionжылмак өтүүлөр, элементтин үстүнө чыкканда анимацияны түзөт