คุณสมบัติ HTML DOM Style animationDelay

คุณสมบัติ animationDelay ใช้ระบุเวลาเริ่มต้นของลำดับอนิเมชัน สามารถตั้งค่าให้เริ่มทันที หลังจากช่วงเวลาหนึ่ง หรือเริ่มจากจุดกลางได้

ไวยากรณ์ (Syntax)

object.style.animationDelay = "time|initial|inherit"

ค่าที่ใช้ได้ (Values)

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <head> <style> 
  #box { 
    width: 50px; 
    height: 50px; 
    border-radius: 10%; 
    background: lightgreen; 
    position: relative; 
    animation: glide 5s; 
    animation-delay: 1s; 
    transition: 0.5s; 
  } 
  @keyframes glide { 
    from {left: 0px;} 
    to {left: 200px; background-color: lightblue;} 
  } 
</style> 
<script> 
  function delayChange(){ 
    document.getElementById("box").style.animationDelay="5s"; 
    document.getElementById("Sample").innerHTML="The animation will now start after a delay of 5 seconds"; 
  } 
</script> </head> 
<body> 
<h1>animationDelay property example</h1> 
<div id="box"></div> 
<p>Change the above animation delay to 5s by clicking the below button</p> 
<button onclick="delayChange()">CHANGE DELAY</button> 
<p id="Sample"></p> 
</body> </html>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

หลังจาก 1 วินาที อนิเมชันจะเริ่มทำงาน และได้ผลลัพธ์ระหว่างการเปลี่ยนผ่าน:

เมื่อคลิกปุ่ม CHANGE DELAY อนิเมชันจะเริ่มหลังจาก 5 วินาที: