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

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

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        width: 500px; 
        height: 400px; 
        background: yellow; 
        border: 5px dashed yellow; 
        background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png'); 
        animation: myanim 3s infinite; 
        background-position: bottom left; 
        background-size: 50px; 
      } 
      @keyframes myanim { 
        20% { 
          background-color: maroon; 
          background-position: bottom right; 
          background-size: 90px; 
          border-bottom: 25px solid orange; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h2>नीचे की सीमा के लिए एनिमेशन करना</h2> 
    <div></div> 
  </body> 
</html>

व्याख्या: एनिमेशन के 20% पर, border-bottom 5px डैश्ड पीले से 25px ठोस नारंगी में बदल जाता है। साथ ही पृष्ठभूमि रंग, स्थिति और आकार भी बदलते हैं।