Sifat animation-iteration-count
Sifat animation-iteration-count
menetapkan bilangan ulangan animasi. Secara lalai,
animasi akan diulang hanya 1 kali dan
kemudian kembali ke keadaan asal.
Sifat kita, bagaimanapun, membolehkan penetapan
bilangan ulangan tertentu atau bahkan
menetapkan ulangan tanpa henti.
Sintaks
pemilih {
animation-iteration-count: nombor bulat atau pecahan | infinite;
}
Nilai
| Nilai | Keterangan |
|---|---|
| Nombor |
Bilangan ulangan yang ditetapkan, selepas itu animasi akan berhenti.
Kedudukan yang akan diambilnya dikawal oleh
sifat animation-fill-mode.
Nilai pecahan boleh ditetapkan - dalam kes ini animasi akan dimainkan
hanya sebahagiannya.
|
infinite |
Animasi akan diulang tanpa henti. |
Nilai lalai: 1.
Contoh . Bilangan Ulangan Terhingga
Dalam contoh ini, animasi akan diulang hanya
3 kali, dan kemudian kembali kepada keadaan
asal:
<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;
}
:
Contoh . Nilai infinite
Sekarang animasi akan diulang tanpa henti:
<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;
}
:
Lihat juga
-
sifat
animation-name,
yang menetapkan nama animasi -
sifat
animation-duration,
yang menetapkan tempoh animasi -
sifat
animation-delay,
yang menetapkan kelewatan sebelum pelaksanaan animasi -
sifat
animation-timing-function,
yang menetapkan kelajuan pelaksanaan animasi -
sifat
animation-direction,
yang menetapkan arah animasi -
sifat
animation-fill-mode,
yang menetapkan keadaan animasi -
sifat
animation-play-state,
yang membolehkan menghentikan animasi sementara -
sifat
animation,
yang merupakan singkatan untuk animasi -
arahan
@keyframes,
yang menetapkan bingkai utama animasi -
peralihan lancar
transition, yang mewakili animasi ketika penuding dilayarkan ke atas elemen