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

CSS में outline शॉर्टहैंड प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह आउटलाइन की चौड़ाई, शैली और रंग को एक साथ बदलता है।

उदाहरण

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

व्याख्या: प्रारंभिक outline: 1px solid blue। एनिमेशन के 50% पर outline: 10px dashed orange हो जाता है। आउटलाइन बॉर्डर के विपरीत लेआउट को प्रभावित नहीं करता (स्पेस नहीं लेता)। outline-offset आउटलाइन और बॉर्डर के बीच अंतराल जोड़ता है।