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

CSS में text-decoration-color प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह टेक्स्ट सजावट (अंडरलाइन, ओवरलाइन, लाइन-थ्रू) के रंग को बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      #demo { 
        position: absolute; 
        right: 0; 
        width: 300px; 
        height: 200px; 
        background-color: blue; 
        text-decoration: underline; 
        animation: myanim 3s infinite; 
      } 
      @keyframes myanim { 
        30% { 
          right: 350px; 
          text-decoration-color: orange; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS text-decoration-color प्रॉपर्टी</h1> 
    <div id="demo"> 
      <h1>यह डेमो टेक्स्ट है।</h1> 
    </div> 
  </body> 
</html>

व्याख्या: तत्व में text-decoration: underline है। एनिमेशन के 30% पर text-decoration-color: orange हो जाता है (डिफ़ॉल्ट टेक्स्ट रंग से)। साथ ही right प्रॉपर्टी भी एनिमेट होती है, जिससे तत्व चलता है।