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

CSS में border-top-color प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह उदाहरण एक टेबल की ऊपरी सीमा के रंग को एनिमेट करता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      table, th, td { 
        border: 2px solid black; 
      } 
      #newTable { 
        width: 500px; 
        height: 300px; 
        background: yellow; 
        border: 15px solid yellow; 
        animation: myanim 3s infinite; 
        background-position: bottom left; 
        background-size: 50px; 
      } 
      @keyframes myanim { 
        30% { 
          background-color: orange; 
          border-spacing: 50px; 
          border-top-color: red; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h2>सीमा शीर्ष रंग के लिए एनिमेशन करना</h2> 
    <table id="newTable"> 
      <tr> 
        <th>विषय</th> 
        <th>छात्र</th> 
        <th>अंक</th> 
      </tr> 
      <tr> 
        <td>गणित</td> 
        <td>अमित</td> 
        <td>98</td> 
      </tr> 
      <tr> 
        <td>विज्ञान</td> 
        <td>सचिन</td> 
        <td>99</td> 
      </tr> 
    </table> 
  </body> 
</html>

व्याख्या: टेबल पर एनिमेशन लागू होता है। 30% पर border-top-color लाल हो जाता है, background-color नारंगी, और border-spacing 50px हो जाता है।