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

CSS में text-indent प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह टेक्स्ट की पहली पंक्ति के इंडेंटेशन को बदलता है।

उदाहरण

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

व्याख्या: प्रारंभिक कोई इंडेंट नहीं (डिफ़ॉल्ट 0)। एनिमेशन के 30% पर text-indent: 120px हो जाता है, जिससे पहली पंक्ति 120px अंदर धंस जाती है। ऋणात्मक मान आउटडेंट (हैंगिंग इंडेंट) बनाते हैं।