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հարթ անցումները, որոնք հանդիսանում են տարրի վրա դրվելու անիմացիա