คุณสมบัติ animationIterationCount ใช้สำหรับตั้งค่าหรือรับค่าจำนวนครั้งที่อนิเมชันจะเล่น
ไวยากรณ์ (Syntax)
object.style.animationIterationCount = "number|infinite|initial|inherit"
ค่าที่ใช้ได้ (Values)
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | number ค่าตัวเลขระบุจำนวนครั้งที่อนิเมชันควรเล่น ค่าเริ่มต้นคือ 1 |
| 2 | infinite ทำให้อนิเมชันเล่นแบบไม่มีที่สิ้นสุด |
| 3 | initial ตั้งค่าคุณสมบัติให้เป็นค่าเริ่มต้น |
| 4 | inherit สืบทอดค่าจากองค์ประกอบพาเรนต์ |
ตัวอย่าง (Example)
<!DOCTYPE html> <html> <head> <style>
p {
color: black;
animation: shrink 3s;
animation-timing-function: ease;
animation-iteration-count: 1;
}
@keyframes shrink {
0% { color: white; letter-spacing: 1.8em; }
100% { color: magenta; letter-spacing: 0.01em; }
}
</style>
<script>
function IncreaseIteration(){
document.getElementById("PARA1").style.animationIterationCount=5;
document.getElementById("Sample").innerHTML="The animation Iteration count is now 5";
}
</script> </head>
<body>
<p id="PARA1">Tellus elementum sagittis vitae et. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
<p>Click the below button to change how many times the above animation will run</p>
<button onclick="IncreaseIteration()">INCREASE COUNT</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์ (Output)
ผลลัพธ์ที่ได้:
เมื่อคลิกปุ่ม INCREASE COUNT:
