CSS line-height प्रॉपर्टी पर एनिमेशन करें

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

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      p { 
        animation: mymove 3s infinite; 
        line-height: 20px; 
      } 
      @keyframes mymove { 
        70% { 
          line-height: 50px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <p>यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है!</p> 
  </body> 
</html>

व्याख्या: प्रारंभिक line-height: 20px है। एनिमेशन के 70% पर यह 50px हो जाता है, जिससे पंक्तियों के बीच अंतर बढ़ जाता है। एनिमेशन 3 सेकंड में अनंत बार चलता है।