CSS top प्रॉपर्टी को एनिमेशन के साथ

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

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        position: absolute; 
        width: 300px; 
        height: 200px; 
        background-color: orange; 
        color: white; 
        top: 0; 
        animation: myanim 3s infinite; 
      } 
      @keyframes myanim { 
        30% { 
          top: 300px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS top प्रॉपर्टी</h1> 
    <div> 
      <h1>यह डेमो टेक्स्ट है!</h1> 
    </div> 
  </body> 
</html>

व्याख्या: तत्व position: absolute और top: 0 (शीर्ष पर) से शुरू होता है। एनिमेशन के 30% पर top: 300px हो जाता है, जिससे यह 300px नीचे चला जाता है। एनिमेशन 3 सेकंड में अनंत बार चलता है।