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

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

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

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

คำอธิบาย: กล่องมี outline สีส้ม (ไม่ใช่ border เพื่อไม่ให้กระทบ layout) เริ่มต้น padding-right = 0 ที่ 30% จะเพิ่มเป็น 60px ทำให้พื้นที่ภายในทางขวาขยายออก element ภายในจะถูกผลักไปซ้าย

ข้อดีของ padding: การ animate padding ไม่ทำให้เกิด layout reflow ของ element ถัดไป (ต่างจาก margin) แต่ทำให้ขนาด element เองเปลี่ยน (ถ้าไม่มี box-sizing: border-box)

แนวทางที่ดีกว่า: ใช้ transform: translateX() บน child element แทน เพื่อประสิทธิภาพ GPU