chuyển đổi: translateX so với chuyển đổi trên thuộc tính bên trái. Trong đó có hiệu suất tốt hơn? CSS

Question

Tôi đang tạo một menu trượt với HTML và CSS3 - đặc biệt là các hiệu ứng chuyển tiếp.

Tôi muốn biết thực hành tốt nhất/hiệu suất tốt nhất để trượt một vị trí tương đối div theo chiều ngang. Khi tôi nhấp vào một nút, nó sẽ thêm một lớp vào div của tôi. Lớp nào tốt hơn? (Lưu ý tôi có thể thêm tất cả tiền tố trình duyệt sau và trang web này chỉ nhắm mục tiêu các trình duyệt hiện đại).

//option 1 
.animate{ 
    -webkit-transition:all ease 0.3s; 
    -webkit-transform:translateZ(200px); 
} 

//option 2 
.animate{ 
    -webkit-transition:all ease 0.3s; 
    left:200px; 
} 

Cảm ơn

Answer 1

Transitions qua dịch Thực hiện MUCH tốt hơn trên các thiết bị di động!

Chỉnh sửa: Đây là bản trình diễn trực tiếp. Chuyển tiếp với translateX và translateY mượt mà hơn top, bottom, left và right. jsFiddle Demo for mobile devices

Answer 2

dịchX và dịchY mượt mà hơn nhiều so với các phiên bản animate bên trái, phải, trên cùng, dưới cùng và jQuery. Xem này để biết chi tiết sâu hơn nhiều với bản demo:

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/