Làm cách nào để áp dụng chuyển tiếp CSS3 cho tất cả các thuộc tính ngoại trừ vị trí nền?

Tôi muốn áp dụng một quá trình chuyển đổi CSS cho tất cả các thuộc tính ngoài vị trí nền. Tôi đã cố gắng làm theo cách này:

.csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}

Đầu tiên, tôi đặt tất cả các thuộc tính thành chuyển tiếp và sau đó tôi cố gắng ghi đè chỉ chuyển đổi cho thuộc tính vị trí nền.

Tuy nhiên, điều này dường như cũng đặt lại tất cả các thuộc tính khác - vì vậy về cơ bản không có quá trình chuyển đổi nào dường như xảy ra nữa.

Có cách nào để làm điều này mà không cần liệt kê tất cả các thuộc tính không?

Đây là một giải pháp cũng hoạt động trên Firefox:

transition: all 0.3s ease, background-position 1ms;

Tôi đã tạo một bản demo nhỏ: http://jsfiddle.net/aWzwh/

Mong là không muộn. Nó được hoàn thành chỉ bằng một dòng!

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 

Điều đó hoạt động trên Chrome. Bạn phải phân tách các thuộc tính CSS bằng dấu phẩy.

Đây là một ví dụ hoạt động: http://jsfiddle.net/H2jet/

Thử cái này...

* {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
a {
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;
}

Bạn có thể thử sử dụng cách W3C tiêu chuẩn:

.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }

http://jsfiddle.net/H2jet/60/

Đối với bất kỳ ai đang tìm kiếm một cách viết tắt, để thêm chuyển tiếp cho tất cả các thuộc tính ngoại trừ một thuộc tính cụ thể có độ trễ , hãy lưu ý rằng có sự khác biệt giữa các trình duyệt hiện đại.

Một bản demo đơn giản dưới đây cho thấy sự khác biệt. Kiểm tra mã đầy đủ

div:hover {
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;
}

Chrome sẽ "kết hợp" hai hoạt ảnh (giống như tôi mong đợi), như bên dưới:

Trong khi Safari "tách" nó (điều này có thể không được mong đợi):

Một cách tương thích hơn là bạn chỉ định quá trình chuyển đổi cụ thể cho thuộc tính cụ thể, nếu bạn có độ trễ cho một trong số chúng.

Thử:

-webkit-transition: all .2s linear, background-position 0;

Điều này đã làm việc cho tôi về một cái gì đó tương tự ..