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

ตัวอย่างการสร้างแอนิเมชันเปลี่ยน padding ล่าง (padding-bottom) ของ element

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 350px;
      height: 150px;
      outline: 3px solid blue;
      animation: myanim 3s infinite;
    }
    @keyframes myanim {
      50% {
        padding-bottom: 30px;
      }
    }
  </style>
</head>
<body>
  <h1>CSS padding-bottom property</h1>
  <div> </div>
</body>
</html>

คำอธิบาย: กล่องมี outline สีน้ำเงิน เริ่มต้น padding-bottom = 0 ที่ 50% จะเพิ่มเป็น 30px พื้นที่ภายในด้านล่างขยายลง

ข้อสังเกต: ใช้ outline แทน border เพื่อไม่ให้ขนาดกล่องเปลี่ยนจาก border-width

แนวทางที่ดีกว่า: ใช้ transform: translateY() บน child element แทน