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

ตัวอย่างนี้แสดงการสร้างแอนิเมชันบนคุณสมบัติ 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>Performing Animation for bottom border</h2>
  <div></div>
</body>
</html>

คำอธิบาย: ที่ 20% ของแอนิเมชัน: เส้นขอบล่างจะเปลี่ยนจาก dashed yellow 5px เป็น solid orange 25px พร้อมกับพื้นหลังสลับสีเป็นมารูน ภาพพื้นหลังเลื่อนจากซ้ายไปขวา และขยายขนาดจาก 50px เป็น 90px

หมายเหตุ: การ animate border-width (รวมถึง border-bottom-width) อาจทำให้เกิด layout shift ควรพิจารณาใช้ transform หรือ box-shadow แทนเพื่อประสิทธิภาพที่ดีกว่า