Chuyển tiếp CSS3: “Chuyển tiếp: tất cả” có chậm hơn “chuyển tiếp: x” không?

Tôi có câu hỏi về tốc độ hiển thị cho thuộc tính chuyển tiếp css3.

Giả sử tôi có một số phần tử:

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

Sẽ hiệu quả hơn nhiều nếu nhắm mục tiêu tất cả các chuyển đổi cho tất cả các phần tử đó bằng cách sử dụng một khai báo div, span, a {transition: all}. Nhưng câu hỏi của tôi là: sẽ "nhanh hơn" về độ mượt mà và nhanh chóng của kết xuất hoạt ảnh khi nhắm mục tiêu thuộc tính chuyển đổi cụ thể của từng phần tử? Ví dụ:

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

Logic của tôi khi hỏi điều này là nếu "engine" css phải tìm kiếm các thuộc tính chuyển tiếp "tất cả" ngay cả khi chỉ có một thuộc tính duy nhất cho một phần tử, thì nó có thể làm chậm mọi thứ.

Có ai biết nếu đó là trường hợp? Cảm ơn!

Có, việc sử dụng transition: allcó thể gây ra những hạn chế lớn về hiệu suất. Có thể có rất nhiều trường hợp mà trình duyệt sẽ trông nếu nó cần thực hiện chuyển đổi, ngay cả khi người dùng sẽ không nhìn thấy nó, như thay đổi màu sắc, thay đổi kích thước, v.v.

Ví dụ đơn giản nhất mà tôi có thể nghĩ ra là: http://dabblet.com/gist/1657661 - hãy thử thay đổi mức thu phóng hoặc kích thước phông chữ và bạn sẽ thấy mọi thứ trở nên động. Tất nhiên không thể có nhiều tương tác của người dùng như vậy, nhưng có thể có một số thay đổi giao diện có thể gây ra chỉnh lại và sửa lại trong một số khối, điều này có thể yêu cầu trình duyệt thử và tạo hiệu ứng cho những thay đổi đó.

Vì vậy, nói chung, bạn không nên sử dụng transition: allvà thay vào đó sẽ sử dụng chuyển tiếp trực tiếp.

Có một số điều khác có thể xảy ra với allquá trình chuyển đổi, chẳng hạn như một loạt các hoạt ảnh khi tải trang, nơi đầu tiên nó sẽ hiển thị các kiểu ban đầu cho các khối và sau đó áp dụng kiểu với một hoạt ảnh. Trong nhiều trường hợp, nó sẽ không phải là thứ bạn muốn :)

Tôi đã sử dụng allcho những trường hợp cần tạo hiệu ứng cho nhiều hơn một quy tắc. Ví dụ: nếu tôi muốn thay đổi color& background-colorbật :hover.

Nhưng hóa ra bạn có thể nhắm mục tiêu nhiều hơn một quy tắc cho quá trình chuyển đổi, vì vậy bạn không bao giờ cần phải sử dụng đến allcài đặt.

.nav a {
  transition: color .2s, text-shadow .2s;
}