पृष्ठभूमि-स्थिति को छोड़कर मैं सभी गुणों में CSS3 संक्रमण कैसे लागू करूं?

Question

मैं पृष्ठभूमि-स्थिति के अलावा सभी गुणों में एक सीएसएस संक्रमण लागू करना चाहता हूं। मैं इसे इस तरह से करने की कोशिश की:

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

सबसे पहले मैं संक्रमण के लिए सभी गुण सेट करें और फिर मैं पूरी तरह से पृष्ठभूमि स्थिति संपत्ति के लिए संक्रमण के ऊपर लिख करने की कोशिश की।

हालांकि यह अन्य सभी गुणों को भी रीसेट करने लगता है - इसलिए मूल रूप से संक्रमणों में से कोई भी और नहीं होता है।

क्या सभी संपत्तियों को सूचीबद्ध किए बिना ऐसा करने का कोई तरीका है?

Answer 1

यहाँ एक समाधान है कि भी Firefox पर काम करता है:

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

मैं एक छोटे से प्रदर्शन किया: http://jsfiddle.net/aWzwh/

Answer 2

प्रयास करें:

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

यह कुछ इसी तरह पर मेरे लिए काम किया ..

Answer 3

आशा देर होने के लिए नहीं। यह केवल एक लाइन का उपयोग करके पूरा किया जाता है!

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

यह क्रोम पर काम करता है। आपको सीएसएस गुणों को अल्पविराम से अलग करना होगा।

यहाँ एक काम कर उदाहरण है: http://jsfiddle.net/H2jet/

Answer 4

इस प्रयास करें ...

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

Answer 5

आप मानक डब्ल्यू 3 सी तरीके का उपयोग करने का प्रयास कर सकते हैं:

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

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