W3.CSS एनिमेशन
एनिमेशन मजेदार है!
W3.CSS एनिमेशन क्लासेस
W3.CSS एनिमेशन के लिए निम्नलिखित कक्षाएं प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3-चेतन-शीर्ष | ऊपर से किसी एलीमेंट में स्लाइड (-300px से 0) |
| w3-चेतन-नीचे | नीचे से किसी तत्व में स्लाइड (-300px से 0) |
| w3-चेतन-बाएं | बाईं ओर से किसी तत्व में स्लाइड (-300px से 0) |
| w3-चेतन-दाएं | किसी तत्व में दाईं ओर से स्लाइड (-300px से 0) |
| w3-चेतन-अस्पष्टता | किसी तत्व की अस्पष्टता को 0.8 सेकंड में 0 से 1 तक एनिमेट करता है |
| w3-चेतन-ज़ूम | किसी तत्व को 0 से 100% आकार में एनिमेट करता है |
| w3-चेतन-लुप्त होती | किसी तत्व की अस्पष्टता को 0 से 1 और 1 से 0 तक एनिमेट करता है (फ़ेड इन + फ़ेड आउट) |
| w3-स्पिन | एक तत्व को 360 डिग्री घुमाता है |
चेतन टॉप
w3- चेतन-शीर्ष वर्ग ऊपर से एक तत्व में स्लाइड करता है (-300px से 0 तक):
उदाहरण
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
नीचे चेतन करें
w3- चेतन-निचला वर्ग नीचे से एक तत्व में स्लाइड करता है (-300px से 0 तक):
उदाहरण
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
चेतन वाम
w3- चेतन-बाएं वर्ग बाएं (-300px से 0) तत्व में स्लाइड करता है:
उदाहरण
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
चेतन अधिकार
w3- चेतन-दाएं वर्ग दाईं ओर से एक तत्व में स्लाइड करता है (-300px से 0):
उदाहरण
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
तत्वों में फीका
w3- चेतन-अपारदर्शिता वर्ग किसी तत्व की अस्पष्टता को 0.8 सेकंड में 0 से 1 तक एनिमेट करता है।
w3-चेतन-अस्पष्टता वर्ग वाले तत्व में फीका :
उदाहरण
<div class="w3-animate-opacity">..</div>
तत्वों में ज़ूम करें
W3- चेतन-ज़ूम वर्ग किसी तत्व को 0 से 100% आकार में एनिमेट करता है।
w3-चेतन-ज़ूम वर्ग वाले तत्व में ज़ूम इन करें:
उदाहरण
<div class="w3-animate-zoom">..</div>
स्पिन तत्व
W3- स्पिन वर्ग एक तत्व को 360 डिग्री घुमाता है:
उदाहरण
<div class="w3-spin">..</div>
लुप्त होती अनंत
w3- चेतन-लुप्त होती कक्षा हर 10 सेकंड में (लगातार) एक तत्व के अंदर और बाहर फीकी पड़ जाती है:
चेतन फीका अंदर और बाहर
उदाहरण
<div class="w3-animate-fading">..</div>
सभी फीका
उदाहरण
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img
class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">