Applying Built-in Animations with w3-animate-* in W3.CSS
एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस आपको अपने वेबपेज कंटेंट एलिमेंट के लिए आपको कई बिल्ट-इन एनिमेशन क्लास प्रोवाइड करता है. इन एनीमेशन क्लास का उपयोग आप अपने वेबपेज एलिमेंट में सिंपल और अट्रैक्टिव कमर्शियल एनिमेशन को वेबपेज कंटेंट में अप्लाई करने में करते हैं। आपके द्वारा उपयोग एनिमेशन आपकी वेबसाइट को अधिक कमर्शियल इंटरैक्टिव और डायनामिक क्रिएट करने में हेल्प करते हैं. आप इन एनीमेशन को उपयोग कर वेब विजिटर यूजर एक्सपेरिएंस को बेहतर कर सकते है। जहा कोई भी बिगिनर वेब यूजर डब्लू3.सीएसएस में एनिमेशन इफ़ेक्ट कोड को वेबपेज में आसानी से अप्लाई कर सकता है.
So, let’s apply animation effects using w3-animate-* class from W3.CSS in HTML webpage.
Overview of W3.CSS available animations.
आपको अपने वेबपेज में मौजूदा एचटीएमएल वेबसाइट वेबपेज में कंटेंट इनफार्मेशन को अट्रैक्टिव और कमर्शियल करने के लिए डब्लू3.सीएसएस आपको कई बिल्ट-इन एनिमेशन क्लास प्रोवाइड करता हैं. जिन्हें आप अपने डिजायर वेबपेज वेबसाइट कंटेंट एलिमेंट पर एनीमेशन को अप्लाई कर सकते हैं।
Here are some of the most commonly used W3.CSS animation classes.
- w3-animate-top – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्क्रीन के टॉप डायरेक्शन से वेबपेज कंटेंट एलिमेंट को एनिमेट करता है।
- w3-animate-bottom – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्क्रीन के बॉटम डायरेक्शन से वेबपेज कंटेंट एलिमेंट को एनिमेट करता है।
- w3-animate-left – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्क्रीन के लेफ्ट डायरेक्शन से वेबपेज कंटेंट एलिमेंट को एनिमेट करता है।
- w3-animate-right – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्क्रीन के राइट डायरेक्शन से वेबपेज कंटेंट एलिमेंट को एनिमेट करता है।
- w3-animate-opacity – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस वेबपेज कंटेंट को एनिमेट कर ओपेसिटी इफ़ेक्ट को अप्लाई करता है।
- w3-animate-zoom – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस वेबपेज कंटेंट में ज़ूमिंग एनिमेशन इफ़ेक्ट को अप्लाई करता है. यहाँ ज़ूम एनीमेशन वेबपेज एलिमेंट को ज़ूम इन और ज़ूम आउट प्रीव्यू करता है ।
- w3-animate-fade – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस वेबपेज कंटेंट किसी एलिमेंट को इनसाइड और आउटसाइड से फ़ेड प्रीव्यू करता है।
- w3-animate-slide – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस वेबपेज कंटेंट एलिमेंट को लेफ्ट से राइट डायरेक्शन में स्लाइड कर मूव करता है।
- w3-animate-spin – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस वेबपेज कंटेंट में स्पिनिंग इफ़ेक्ट के साथ वेबपेज एलिमेंट को रोटेट करता है।
You can apply these classes to any HTML content element.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Some Multiple w3.css Button Animations Example</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<h1 class=”w3-animate-left”><center>Display W3.css Left Button With Animate </center></h1>
<h2 class=”w3-animate-right”><center>Display W3.css Right Button With Animate </center></h2>
<button class=”w3-button w3-animate-zoom w3-purple w3-margin-top”><center>Zoom Animate Button</center></button>
<button class=”w3-button w3-animate-top w3-red w3-margin-top”><center> Animate Top Button</center></button>
<button class=”w3-button w3-animate-bottom w3-blue w3-margin-top”><center> Animate Bottom Button</center></button>
<button class=”w3-button w3-animate-left w3-green w3-margin-top”><center>Animate Left Button</center></button>
<button class=”w3-button w3-animate-right w3-yellow w3-margin-top”><center> Animate Right Button</center></button>
<button class=”w3-button w3-animate-slide w3-orange w3-margin-top”><center>Slide Animate Button</center></button>
<button class=”w3-button w3-w3-animate-spin w3-pink w3-margin-top”><center>Spin Animate Button</center></button>
</div>
</body>
</html>
Basic use of animations in W3.CSS webpage
आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस w3-animate-* क्लास को डायरेक्ट वेबपेज कंटेंट एलिमेंट में अप्लाई कर सकते हैं. जिसे आप अपने वेबपेज वेबसाइट में मैन्युअली एनिमेट करना चाहते हैं।
Here you get an example, in which you will know how to use W3.CSS animation in a webpage.
Animate element example with w3-animate-opacity.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Simple Animate W3.CSS Example</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container”>
<h1 class=”w3-animate-opacity”><center>Simple Animated Webpage Element Example</center></h1>
<p class=”w3-animate-opacity w3-large”><center>It Used To Display Text With Opacity Effect</center></p>
<div class=”w3-button w3-animate-bottom w3-green w3-padding-large”>Bottom Animate Button</div>
</div>
<div>
<br>
<div class=”w3-button w3-animate-top w3-blue w3-padding-large”>Top Animate Button</div>
</div>
</body>
</html>
W3.CSS w3-animate-opacity explanation.
- w3-animate-opacity – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस एलिमेंट पर फ़ेड-इन इफ़ेक्ट को अप्लाई करता है. जहा यह वेबपेज में धीरे-धीरे अपनी एनिमेट ओपेसिटी 0 से 1 पोजीशन में मूव करता है।
- w3-animate-top – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस एलिमेंट को स्क्रीन के टॉप से उसके फाइनल पोजीशन तक एनिमेट करता है।
Combining W3.CSS animations with other elements.
आप अपने एक्टिव एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस एनिमेशन को फॉर्म बटन, डिव ब्लॉक या वेबपेज इमेज, जैसे अन्य टैग या एलिमेंट के साथ कंबाइंड करके अधिक डायनामिक वेबपेज बिहैवियर को क्रिएट कर सकते हैं।
Example of using multiple animations in an existing webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Multiple w3.css Animations</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<h1 class=”w3-animate-left”><center>Display Heading 1 With W3.css Animate </center></h1>
<p class=”w3-animate-right”><center>Let Tray Right Animation In Simple Web Page</center> </p>
<button class=”w3-button w3-animate-zoom w3-purple w3-margin-top”><center>Zoom Animate Button</center></button>
<img src=”https://cdn.pixabay.com/photo/2017/04/23/19/30/earth-2254769_1280.jpg” class=”w3-animate-spin w3-margin-top” heigt=200 width=200 alt=”Spinning Image”>
</div>
</body>
</html>
W3.CSS animation explanation.
- w3-animate-left – आप अपने एक्टिव एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस टाइटल स्क्रीन को लेफ्ट डायरेक्शन से एनिमेट होता है।
- w3-animate-bottom – आप अपने एक्टिव एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस कंटेंट ऑब्जेक्ट को पैराग्राफ़ स्क्रीन के बॉटम डायरेक्शन से एनिमेट कर सकते है।
- w3-animate-zoom – आप अपने एक्टिव एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस में बटन ज़ूमिंग इफ़ेक्ट को ग्रो और श्रिंक कर सकते है।
- w3-animate-spin – आप अपने एक्टिव एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस एलिमेंट ऑब्जेक्ट इमेज को कन्टीन्यूस स्पिन कर सकते है।
