CSS हमें तत्वों के गुणों के संक्रमण को चेतन करने की अनुमति देता है। हम अपनी वांछित शैलियों को परिभाषित करने के लिए एनीमेशन संपत्ति का उपयोग करते हैं। हम एनिमेशन कीवर्ड का उपयोग करके एनिमेशन-नाम, एनिमेशन-अवधि, एनिमेशन-पुनरावृत्ति-गिनती, आदि जैसे गुणों को जोड़ सकते हैं।
सिंटैक्स
एनिमेशन प्रॉपर्टी का सिंटैक्स इस प्रकार है -
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
मान
निम्नलिखित मान हैं -
| मान | विवरण |
|---|---|
| एनीमेशन-नाम | चयनकर्ता को आबद्ध करने के लिए मुख्य-फ़्रेम नाम निर्दिष्ट करने के लिए। |
| एनीमेशन-अवधि | एनीमेशन की समयावधि (सेकंड या मिलीसेकंड में) को पूरा करने के लिए निर्दिष्ट करने के लिए। |
| एनीमेशन-टाइमिंग-फ़ंक्शन | एनीमेशन गति वक्र निर्दिष्ट करने के लिए। |
| एनीमेशन-देरी | एनीमेशन शुरू होने से पहले कुछ देरी निर्दिष्ट करने के लिए |
| एनीमेशन-पुनरावृत्ति-गणना | ऐनिमेशन चलाए जाने का समय निर्दिष्ट करने के लिए |
| एनीमेशन-दिशा | यह इंगित करने के लिए कि ऐनिमेशन को वैकल्पिक या विपरीत चक्र में चलना चाहिए या नहीं। |
| एनिमेशन-फिल-मोड | उन मानों को निर्दिष्ट करने के लिए जो एनीमेशन द्वारा निष्पादित होने के समय के बाहर लागू होते हैं |
| एनिमेशन-प्ले-स्टेट | यह निर्दिष्ट करने के लिए कि वर्तमान में एनिमेशन रुका हुआ है या चल रहा है। |
| आरंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य को इनहेरिट करने के लिए। |
उदाहरण
आइए एनिमेशन गुण के लिए उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 5px;
height: 15px;
background-color: limegreen;
animation: demo 4s infinite;
}
@keyframes demo {
from {width: 5px; background-color: limegreen;}
to {width: 400px; background-color: darkgreen;}
}
@keyframes demo1 {
from {height: 5px; background-color: limegreen;}
to {height: 400px; background-color: darkgreen;}
}
</style>
<script>
function changeAnimation() {
document.getElementById("DIV1").style.animation = "demo1 4s 2";
}
</script>
</head>
<body>
<button onclick="changeAnimation()">CHANGE ANIMATION</button>
<p>Change the below animation by clicking the above button</p>
<div id="DIV1"></div>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
एनिमेशन बदलें बटन पर क्लिक करने पर एनिमेशन बदल जाएगा -
