CSSVì mỗi khung hình trình duyệt đi qua các bước style → layout → paint → composite, và thuộc tính bạn đổi quyết định phải chạy lại từ bước nào.
- Đổi
left,top,width,height,margin→ layout lại (reflow) toàn bộ nhánh liên quan, rồi paint, rồi composite. Đắt nhất. - Đổi
background-color,box-shadow,border-radius→ bỏ qua layout nhưng vẫn paint lại. - Đổi
transformvàopacity→ chỉ composite, chạy trên compositor thread, không đụng layout hay paint. Đây là hai thuộc tính an toàn nhất cho animation 60fps.
css
/* trigger layout every frame */
.menu { left: -300px; transition: left .2s; }
.menu.open { left: 0; }
/* composite only */
.menu { transform: translateX(-100%); transition: transform .2s ease; }
.menu.open { transform: none; }Khi buộc phải đổi kích thước: dùng transform: scale() cho hiệu ứng thị giác, hoặc animate max-height chấp nhận đánh đổi, hoặc dùng kỹ thuật FLIP (đo vị trí đầu/cuối rồi diễn hoạt bằng transform). Với accordion, grid-template-rows: 0fr -> 1fr là cách hiện đại nhưng vẫn là animation gây layout.
Luôn kiểm chứng bằng Performance panel: xem có frame nào rơi vào Layout/Paint không, đừng kết luận bằng cảm nhận. Và bọc animation trong @media (prefers-reduced-motion: reduce) để tôn trọng người dùng tắt hiệu ứng.