ฉันจะใช้การเปลี่ยน CSS3 กับคุณสมบัติทั้งหมดยกเว้นตำแหน่งพื้นหลังได้อย่างไร

ฉันต้องการใช้การเปลี่ยน CSS กับคุณสมบัติทั้งหมดนอกเหนือจากตำแหน่งพื้นหลัง ฉันพยายามทำด้วยวิธีนี้:

.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;
}

ก่อนอื่นฉันตั้งค่าคุณสมบัติทั้งหมดเป็นการเปลี่ยนแปลงจากนั้นฉันพยายามเขียนทับการเปลี่ยนแปลงสำหรับคุณสมบัติตำแหน่งพื้นหลังเท่านั้น

อย่างไรก็ตามดูเหมือนว่าจะรีเซ็ตคุณสมบัติอื่น ๆ ทั้งหมดด้วยดังนั้นโดยพื้นฐานแล้วไม่มีการเปลี่ยนใด ๆ เกิดขึ้นอีกต่อไป

มีวิธีดำเนินการโดยไม่แสดงรายการคุณสมบัติทั้งหมดหรือไม่?

นี่คือวิธีแก้ปัญหาที่ใช้ได้กับ Firefox:

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

ฉันทำการสาธิตเล็ก ๆ : http://jsfiddle.net/aWzwh/

หวังว่าจะไม่สายนะ ทำได้โดยใช้เพียงบรรทัดเดียว!

-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; 

ที่ทำงานบน Chrome คุณต้องแยกคุณสมบัติ CSS ด้วยลูกน้ำ

นี่คือตัวอย่างการทำงาน: http://jsfiddle.net/H2jet/

ลองนี่ ...

* {
    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;
}

คุณสามารถลองใช้วิธี W3C มาตรฐาน:

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

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

สำหรับใครก็ตามที่มองหาวิธีชวเลขในการเพิ่มการเปลี่ยนแปลงสำหรับคุณสมบัติทั้งหมดยกเว้นคุณสมบัติเฉพาะหนึ่งรายการที่มีความล่าช้าโปรดทราบว่าเบราว์เซอร์สมัยใหม่มีความแตกต่างกัน

การสาธิตง่ายๆด้านล่างแสดงความแตกต่าง ตรวจสอบรหัสแบบเต็ม

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

Chrome จะ "รวม" แอนิเมชั่นทั้งสอง (ซึ่งเป็นไปตามที่ฉันคาดหวังไว้) ดังต่อไปนี้:

ในขณะที่ Safari "แยก" มัน (ซึ่งอาจไม่คาดคิด):

วิธีที่เข้ากันได้มากกว่าคือคุณกำหนดการเปลี่ยนเฉพาะสำหรับคุณสมบัติเฉพาะหากคุณมีความล่าช้าสำหรับหนึ่งในนั้น

ลอง:

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

สิ่งนี้ได้ผลสำหรับฉันในสิ่งที่คล้ายกัน ..