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

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

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        width: 350px; 
        height: 150px; 
        outline: 2px solid orange; 
        animation: myanim 3s infinite; 
      } 
      @keyframes myanim { 
        50% { 
          padding: 20px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS padding प्रॉपर्टी</h1> 
    <div> </div> 
  </body> 
</html>

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