Sifat animation-duration
Sifat animation-duration menetapkan
masa pelaksanaan animasi.
Sintaks
pemilih {
animation-duration: masa dalam s atau ms;
}
Nilai
| Nilai | Penerangan |
|---|---|
s |
Menetapkan masa dalam saat (contohnya 3s). |
ms |
Menetapkan masa dalam milisaat (contohnya 3ms). Satu saat ialah 1000 milisaat. |
Nilai lalai: 0s.
Contoh
Dalam contoh ini, animasi akan dimainkan
selama 3 saat:
<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-delay,
yang menetapkan kelewatan sebelum pelaksanaan animasi -
sifat
animation-timing-function,
yang menetapkan kelajuan pelaksanaan animasi -
sifat
animation-iteration-count,
yang menetapkan bilangan lelaran 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 apabila penuding dilayarkan ke atas elemen