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

CSS में margin शॉर्टहैंड प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह चारों ओर के मार्जिन को एक साथ बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      p { 
        animation: mymove 3s infinite; 
        margin: 20px; 
      } 
      @keyframes mymove { 
        70% { 
          margin: 60px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <p>यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है!</p> 
  </body> 
</html>

व्याख्या: प्रारंभिक margin: 20px (चारों ओर 20px)। एनिमेशन के 70% पर margin: 60px हो जाता है। margin शॉर्टहैंड margin-top, margin-right, margin-bottom, margin-left को एक साथ सेट करता है।