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

สามารถสร้างแอนิเมชันให้กับคุณสมบัติ margin-bottom ได้โดยใช้ @keyframes ตัวอย่างด้านล่างแสดงการเปลี่ยนแปลงระยะห่างด้านล่างของพารากราฟแบบวนซ้ำ

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

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      animation: mymove 3s infinite;
      margin-bottom: 20px;
    }
    @keyframes mymove {
      70% {
        margin-bottom: 60px;
      }
    }
  </style>
</head>
<body>
  <p>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</p>
  <p>This is demo text 2!</p>
</body>
</html>

คำอธิบาย: พารากราฟแรกจะมี margin-bottom เริ่มต้น 20px เมื่อแอนิเมชันทำงานถึง 70% จะขยายเป็น 60px แล้วกลับมาที่ 20px ทำให้พารากราฟที่สองเคลื่อนที่ขึ้นลงตามไปด้วย การใช้ infinite ทำให้วนซ้ำไม่รู้จบ

ข้อควรระวัง: การ animate margin อาจส่งผลให้ layout reflow บ่อยๆ อาจมีผลต่อประสิทธิภาพ (performance) หากใช้กับหลาย element พร้อมกัน