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

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนระยะห่างบน (margin-top) ของ element

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: orange;
      animation: myanim 4s infinite;
      color: white;
    }
    @keyframes myanim {
      30% {
        margin-top: 30px;
      }
    }
  </style>
</head>
<body>
  <h2>Heading One</h2>
  <div>
    This is demo text.
  </div>
</body>
</html>

คำอธิบาย: กล่องสีส้มเริ่มต้นไม่มี margin-top ที่ 30% จะเพิ่ม margin-top 30px ทำให้กล่องเลื่อนลง แล้วกลับขึ้นมา

ข้อควรระวัง: การ animate margin-top ก่อให้เกิด layout reflow ส่งผลต่อ element ถัดไป

แนวทางที่ดีกว่า: ใช้ transform: translateY(30px) แทน

@keyframes betterSlide {
  30% { transform: translateY(30px); }
}