CSS right प्रॉपर्टी को एनिमेट करें

CSS में right प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह स्थिति निर्धारित तत्वों की दाईं ओर से दूरी को बदलता है।

उदाहरण

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

व्याख्या: तत्व position: absolute और right: 0 (दाएं किनारे पर) से शुरू होता है। एनिमेशन के 30% पर right: 350px हो जाता है, जिससे यह बाईं ओर 350px खिसक जाता है। एनिमेशन 5 सेकंड में अनंत बार चलता है।