Reflow vs repaint và cách làm animation CSS mượt (transform, opacity, `will-change`)

Thay đổi	Pipeline chạy lại
width, top, margin, font-size	Layout, Paint, Composite
color, background, box-shadow	Paint, Composite
transform, opacity	Chỉ Composite (thường)

/* Tệ: layout mỗi frame */
.box { transition: left .3s; }
/* Tốt */
.box { transition: transform .3s; }
.box.open { transform: translateX(200px); }

.modal { will-change: transform; } /* chỉ khi sắp animate */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

// Layout thrashing: đọc/ghi xen kẽ buộc reflow đồng bộ nhiều lần
els.forEach((el) => { el.style.width = el.offsetWidth + 10 + "px"; });
// Tốt hơn: gom đọc trước, ghi sau (hoặc dùng requestAnimationFrame)

• transition đi từ trạng thái A sang B khi có thay đổi; @keyframes animation định nghĩa nhiều bước, tự chạy và lặp.
• Kiểm tra bằng DevTools Performance (Layout, Paint) và Layers panel.