อย่าแอนิเมตเลย์เอาต์หนัก ๆ

คุณสมบัติที่แพงบ่อย

การเปลี่ยน width, height, top/left, margin, padding จำนวนมากซ้ำ ๆ ทำให้เบราว์เซอร์จัดเลย์เอาต์ใหม่ทุกเฟรม — หน้ากระตุก โดยเฉพาะบนมือถือ

/* หลีกเลี่ยงแนวนี้สำหรับโมชันหลัก */
.panel.open {
  height: 240px; /* แอนิเมต height ทั้งก้อน */
  transition: height 400ms;
}

/* แนวทางเบากว่า: transform / opacity
   หรือตัดด้วย grid-template-rows / max-height อย่างมีสติ */

หลุมอื่น

• แอนิเมตทุกอย่างพร้อมกันตอนโหลดหน้า → ผู้ใช้ยังไม่อ่าน

• ระยะยาวเกิน 1 วินาทีโดยไม่มีเหตุ → รู้สึกช้า

• ไม่มี reduced-motion → เข้าถึงไม่ได้สำหรับบางคน