CSS word-spacing प्रॉपर्टी को एनिमेट करें

CSS में word-spacing प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह शब्दों के बीच की दूरी को बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        border: 2px solid blue; 
        background: orange; 
        animation: myanim 3s infinite; 
      } 
      @keyframes myanim { 
        50% { 
          word-spacing: 30px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS word-spacing प्रॉपर्टी</h1> 
    <div> 
      यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! 
      यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! 
      यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! 
      यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! 
      यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! 
    </div> 
  </body> 
</html>

व्याख्या: प्रारंभिक सामान्य शब्द अंतराल। एनिमेशन के 50% पर word-spacing: 30px हो जाता है, जिससे शब्दों के बीच बड़ा अंतर आ जाता है। letter-spacing अक्षरों के बीच, word-spacing शब्दों के बीच की दूरी नियंत्रित करता है।