CSS एनिमेशन के साथ vertical-align प्रॉपर्टी को एनिमेट करें

CSS में vertical-align प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह इंलाइन या टेबल-सेल तत्वों के ऊर्ध्वाधर संरेखण को बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      img { 
        vertical-align: 80px; 
        animation: myanim 3s; 
      } 
      @keyframes myanim { 
        50% { 
          vertical-align: 120px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS vertical-align प्रॉपर्टी</h1> 
    <div></div> 
    <p><img src="https://www.tutorialspoint.com/latest/microservice_architecture.png" width="80" height="80"> 
      यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। 
    </p> 
  </body> 
</html>

व्याख्या: छवि का प्रारंभिक vertical-align: 80px (बेसलाइन से 80px ऊपर)। एनिमेशन के 50% पर 120px हो जाता है। vertical-align लंबाई, प्रतिशत, या कीवर्ड (baseline, top, middle, bottom, आदि) लेता है। यह केवल इंलाइन/इंलाइन-ब्लॉक/टेबल-सेल तत्वों पर लागू होता है।