CSS outline-offset प्रॉपर्टी को एनिमेट करें

CSS में outline-offset प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह आउटलाइन और बॉर्डर एज के बीच की दूरी को बदलता है।

उदाहरण

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

व्याख्या: प्रारंभिक कोई ऑफसेट नहीं (डिफ़ॉल्ट 0)। एनिमेशन के 50% पर outline-offset: 50px हो जाता है, जिससे नीली आउटलाइन तत्व से 50px बाहर खिसक जाती है। ऋणात्मक मान आउटलाइन को अंदर खींचते हैं।