รัน Animation ถอยหลังก่อนแล้วค่อยไปข้างหน้าด้วย CSS

ใช้คุณสมบัติ animation-direction ค่า alternate-reverse เพื่อรันแอนิเมชันถอยหลังก่อน แล้วค่อยไปข้างหน้า สลับกัน

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      position: relative;
      background-color: yellow;
      animation-name: myanim;
      animation-duration: 2s;
      animation-direction: alternate-reverse;
      animation-iteration-count: 3;
    }
    @keyframes myanim {
      0% { background-color: green; left: 0px; top: 0px; }
      50% { background-color: maroon; left: 100px; top: 100px; }
      100% { background-color: gray; left: 0px; top: 0px; }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

คำอธิบาย: alternate-reverse = รอบแรก: ถอยหลัง (100% → 0%), รอบที่สอง: ไปข้างหน้า (0% → 100%), รอบที่สาม: ถอยหลังอีกครั้ง... keyframes ใช้ 3 จุด (0%, 50%, 100%) สร้างการเคลื่อนที่ซับซ้อนมากขึ้น