অ্যানিমেশন ডিলে প্রপার্টি অ্যানিমেশন সিকোয়েন্সের শুরুর সময় নির্দিষ্ট করতে ব্যবহার করা হয়। আমরা এটিকে অবিলম্বে শুরু করতে সেট করতে পারি, সময়ের ব্যবধানে বা মাঝপথে৷
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলঅ্যানিমেশন ডিলে প্রপার্টি −
সেট করা হচ্ছেobject.style.animationDelay = "time|initial|inherit"
মান
নিম্নলিখিত মান হতে পারে −
| মান | বিবরণ |
|---|---|
| সময় | অ্যানিমেশন শুরু হওয়ার আগে অপেক্ষা করতে সেকেন্ড বা মিলিসেকেন্ডে সময় উল্লেখ করার জন্য৷ সময়ের জন্য ডিফল্ট মান হল 0। |
| প্রাথমিক | এই প্রপার্টিটিকে প্রাথমিক মান সেট করার জন্য। |
| উত্তরাধিকারী | অভিভাবক সম্পত্তি মান উত্তরাধিকার সূত্রে পেতে। |
উদাহরণ
আসুন অ্যানিমেশনডিলে প্রপার্টি -
-এর উদাহরণ দেখি<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
1s পরে, অ্যানিমেশন শুরু হয়, এবং আমরা এর ট্রানজিশনের মাঝপথে নিম্নলিখিত আউটপুট পাই -
পরিবর্তন বিলম্ব বোতামে ক্লিক করে, অ্যানিমেশন এখন 5 সেকেন্ড পরে শুরু হবে -
