การสร้างแอนิเมชันสำหรับคุณสมบัติ CSS border-top-color

ตัวอย่างนี้แสดงการสร้างแอนิเมชันเปลี่ยนสีเส้นขอบบน (border-top-color) ของตาราง พร้อมกับการเปลี่ยนสีพื้นหลังและ border-spacing

ตัวอย่างโค้ด

<!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>Performing Animation for border top color</h2>
  <table id="newTable">
    <tr>
      <th>Subject</th>
      <th>Student</th>
      <th>Marks</th>
    </tr>
    <tr>
      <td>Maths</td>
      <td>Amit</td>
      <td>98</td>
    </tr>
    <tr>
      <td>Science</td>
      <td>Sachin</td>
      <td>99</td>
    </tr>
  </table>
</body>
</html>

คำอธิบาย: ที่ 30% ของแอนิเมชัน: เส้นขอบบนของตารางจะเปลี่ยนสีเป็นแดง (border-top-color: red) พร้อมกับพื้นหลังสีส้ม และระยะห่างระหว่างเซลล์ขยายเป็น 50px (border-spacing)

ข้อสังเกต: border-spacing ทำงานได้เฉพาะเมื่อ border-collapse: separate (ค่าเริ่มต้น) การ animate border-color ทั่วไปมีประสิทธิภาพดีกว่า border-width เพราะไม่ทำให้เกิด reflow