กำหนดทิศทางการเล่น Animation (Forwards/Reverse/Alternate) ด้วย CSS

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

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

ลองรันโค้ดด้านล่างเพื่อตั้งค่าแอนิเมชันเล่นถอยหลัง:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      background-color: yellow;
      animation-name: myanim;
      animation-duration: 2s;
      animation-direction: reverse;
    }
    @keyframes myanim {
      from { background-color: green; }
      to { background-color: blue; }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

ค่าของ animation-direction:

• normal (ค่าเริ่มต้น) - from → to
• reverse - to → from (ถอยหลัง)
• alternate - ไป-กลับ สลับกัน (รอบคี่: from→to, รอบคู่: to→from)
• alternate-reverse - ถอยหลังก่อน แล้วไป-กลับ สลับกัน