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

ตัวอย่างการสร้างแอนิเมชันกับคุณสมบัติ padding แบบ shorthand (ทั้ง 4 ด้านพร้อมกัน)

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

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

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

ข้อจำกัด: เหมือน margin shorthand ไม่สามารถควบคุมแต่ละด้านแยกกันใน keyframe เดียวกันได้

แนวทางที่ดีกว่า: ใช้ transform: scale() สำหรับการขยายพื้นที่ภายใน แยก animate padding-top, padding-right เป็นต้น หากต้องการควบคุมทิศทาง