Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

HTML DOM स्टाइल एनिमेशनDuration प्रॉपर्टी

<घंटा/>

एनीमेशन अवधि संपत्ति का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि एनीमेशन को एक चक्र पूरा करने में कितना समय लगेगा।

सिंटैक्स

−

. के लिए वाक्य रचना निम्नलिखित है

एनीमेशन अवधि संपत्ति सेट करना -

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

मान

निम्नलिखित मान हैं -

<वें शैली ="चौड़ाई:88.8435%; पाठ-संरेखण:केंद्र;">विवरण
मान
समय एनीमेशन शुरू होने से पहले प्रतीक्षा करने के लिए सेकंड या मिलीसेकंड में समय का उल्लेख करने के लिए। समय के लिए डिफ़ॉल्ट मान 0 है।
आरंभिक इस गुण को प्रारंभिक मान पर सेट करने के लिए।
विरासत में मिले मूल संपत्ति मान को इनहेरिट करने के लिए

उदाहरण

आइए एनीमेशन अवधि संपत्ति के लिए एक उदाहरण देखें -




उपरोक्त एनिमेशन अवधि बनाने के लिए नीचे दिए गए बटन पर क्लिक करें



 
आउटपुट
 

 यह निम्नलिखित आउटपुट देगा -
 

 HTML DOM स्टाइल एनिमेशनDuration प्रॉपर्टी 
 

 एनिमेशन कुछ समय बाद रंग बदलता है -
 

 HTML DOM स्टाइल एनिमेशनDuration प्रॉपर्टी 
 

 अवधि बदलें बटन पर क्लिक करने पर एनिमेशन की अवधि 10 सेकंड तक बढ़ जाएगी -
 

 HTML DOM स्टाइल एनिमेशनDuration प्रॉपर्टी
  1. HTML DOM स्टाइल एनिमेशन टाइमिंगफंक्शन प्रॉपर्टी

    एनीमेशनटाइमिंगफंक्शन का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि एनीमेशन अपने चक्र के दौरान किस तरह से आगे बढ़ता है। यह एनीमेशन के लिए गति वक्र को सेट या वापस करके ऐसा करता है। गति वक्र परिभाषित करता है कि एनीमेशन को एक राज्य से दूसरे राज्य में ले जाने में लगने वाले समय को निर्दिष्ट करके संक्र

  1. एचटीएमएल डोम स्टाइल एनिमेशनप्लेस्टेट प्रॉपर्टी

    एनीमेशनप्लेस्टेट संपत्ति का उपयोग एनीमेशन स्थिति को सेट करने या प्राप्त करने के लिए किया जाता है चाहे वह चल रहा हो या रोका गया हो। यह एनिमेशन को टॉगल करने में उपयोगी है। सिंटैक्स . के लिए सिंटैक्स निम्नलिखित है एनीमेशनप्लेस्टेट प्रॉपर्टी सेट करना - object.style.animationPlayState = "running|

  1. एचटीएमएल डोम स्टाइल एनीमेशनइटरेशनकाउंट प्रॉपर्टी

    एनीमेशनइटरेशनकाउंट प्रॉपर्टी का उपयोग एनीमेशन के चलने की संख्या को सेट करने या प्राप्त करने के लिए किया जाता है। सिंटैक्स − . के लिए वाक्य रचना निम्नलिखित है एनीमेशनइटरेशनकाउंट प्रॉपर्टी सेट करना - object.style.animationIterationCount = "number|infinite|initial|inherit" मान निम्नलिखित म