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

คุณสมบัติ order ใน Flexbox/Grid กำหนดลำดับการแสดงผลของ items สามารถนำไปใช้ในแอนิเมชันได้ แต่จะมีการ "กระโดด" (discrete jump) ไม่ใช่การเคลื่อนไหวแบบต่อเนื่อง เพราะ order เป็นค่า integer

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo1 {
      width: 600px;
      height: 180px;
      display: flex;
    }
    #inner {
      animation: myanim 3s infinite;
    }
    #demo1 div {
      width: 110px;
      height: 180px;
    }
    @keyframes myanim {
      30% {
        order: 4;
      }
    }
  </style>
</head>
<body>
  <h1>CSS order property</h1>
  <div id="demo1">
    <div style="background-color:yellow;order:1;" id="inner"></div>
    <div style="background-color:blue;order:2;"></div>
    <div style="background-color:orange;order:3;"></div>
    <div style="background-color:pink;order:4;"></div>
    <div style="background-color:gray;order:5;"></div>
    <div style="background-color:maroon;order:6;" id="inner"></div>
  </div>
</body>
</html>

คำอธิบาย: ไอเท็มสีเหลือง (order:1) และสีม่วง (order:6) มี id="inner" เดียวกัน (invalid HTML) ที่ 30% จะมี order: 4 ทำให้ไอเท็มสีเหลืองกระโดดไปอยู่ระหว่างสีชมพู (4) และสีเทา (5) แบบทันที (ไม่มี transition ระหว่างค่า integer)

ข้อสังเกต: การ animate order ไม่ราบรื่น ใช้ได้เฉพาะกรณีที่ต้องการเปลี่ยนลำดับแบบทันที (instant reorder) สำหรับการเคลื่อนไหวราบรื่น ควรใช้ transform: translateX() แทน