एनीमेशन डिले गुण का उपयोग एनीमेशन अनुक्रम के प्रारंभ समय को निर्दिष्ट करने के लिए किया जाता है। हम इसे एक समय अंतराल या बीच में तुरंत शुरू करने के लिए सेट कर सकते हैं।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैएनीमेशन डिले प्रॉपर्टी सेट करना -
object.style.animationDelay = "time|initial|inherit"
मान
निम्नलिखित मान हो सकते हैं -
| मान | <वें शैली ="चौड़ाई:86.8027%; पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| समय | एनीमेशन शुरू होने से पहले प्रतीक्षा करने के लिए सेकंड या मिलीसेकंड में समय का उल्लेख करने के लिए। समय के लिए डिफ़ॉल्ट मान 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 सेकंड के बाद एनिमेशन शुरू हो जाएगा -
