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

CSS में left प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह स्थिति निर्धारित तत्वों (positioned elements) की क्षैतिज स्थिति को बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        border: 2px solid black; 
        width: 300px; 
        height: 100px; 
        position: absolute; 
        left: 0; 
        animation: myanim 5s infinite; 
      } 
      @keyframes myanim { 
        30% { 
          left: 200px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <div>यह डेमो टेक्स्ट है</div> 
  </body> 
</html>

व्याख्या: तत्व position: absolute और left: 0 के साथ शुरू होता है। एनिमेशन के 30% पर left: 200px हो जाता है, जिससे यह दाईं ओर चला जाता है। left केवल स्थिति निर्धारित तत्वों (relative, absolute, fixed, sticky) पर काम करता है।