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

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

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

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

คำอธิบาย: กล่องสีน้ำเงินเริ่มต้นไม่มี margin-right (หรือค่าเริ่มต้น 0) ที่ 30% ของแอนิเมชัน 4 วินาที จะเพิ่ม margin-right เป็น 30px ทำให้เนื้อหาในกล่องอาจถูกบีบอัดหรือกล่องเลื่อนซ้าย (ขึ้นอยู่กับ layout context) แล้วกลับมาที่ 0

ข้อควรระวัง: เหมือน margin อื่นๆ การ animate margin-right ก่อให้เกิด layout reflow ควรพิจารณาใช้ transform: translateX() แทนสำหรับการเคลื่อนที่