HTML DOM Style animationDelay প্রপার্টি

animationDelay প্রপার্টি ব্যবহার করে অ্যানিমেশন সিকোয়েন্সের শুরু করার সময় নির্দিষ্ট করা হয়। এটি সরাসরি শুরু হতে পারে, একটি সময় ইন্টারভালের পর বা মাঝপথে শুরু হতে পারে।

সিনট্যাক্স

animationDelay প্রপার্টি সেট করার সিনট্যাক্স:

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

মানসমূহ

উদাহরণ

animationDelay প্রপার্টির উদাহরণ:

<!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>

আউটপুট

নিচের আউটপুট তৈরি হবে:

১ সেকেন্ড পর অ্যানিমেশন শুরু হবে এবং ট্রানজিশনের মাঝপথে নিচের আউটপুট দেখা যাবে:

CHANGE DELAY বাটনে ক্লিক করলে অ্যানিমেশন এখন ৫ সেকেন্ড পর শুরু হবে: