मैं पृष्ठभूमि-स्थिति को छोड़कर सभी गुणों के लिए 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;
}

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

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

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

Comments

नमस्ते, मैं वास्तव में इस मुद्दे की तलाश में हूं। क्या आपको कोई स्वीकार्य जवाब मिला?

— मिल्के पैटरन

Answer 1

यहाँ एक समाधान है जो फ़ायरफ़ॉक्स पर भी काम करता है:

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

मैंने एक छोटा डेमो किया: http://jsfiddle.net/aWzwh/

Comments

किसी कारण से 1msमेरे लिए काम नहीं किया, लेकिन 0किया।

— फ्लिमल जूल

@ क्या आप ब्राउज़र का उपयोग कर रहे हैं? और "काम नहीं किया" का क्या मतलब है, कुछ भी चेतन नहीं किया?

— फेलिक्स एडलमन

मेरे लिए 1msकाम नहीं किया, लेकिन 1ms noneकिया! @ericsoco 0msया 0sकाम करता है, भी।

— बीकोडर

समय की इकाइयों में एक इकाई होनी चाहिए। तो 0 काम नहीं करता है, जैसे 4 काम नहीं करेगा, लेकिन 4S उसी तरह काम करेगा जैसे 0 काम करेगा।

— ESR

मैंने इतने लंबे समय तक इसके लिए खोज की है, धन्यवाद, @FelixEdelmann !!

— 14

Answer 2

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

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

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

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

Comments

मैं क्रोम पर यह कोशिश कर रहा हूं, और यह मेरे लिए काम नहीं करता है। allसंक्रमण-संपत्ति कोई बात नहीं क्या सभी दूसरों ओवरराइड करने के लिए लगता है।

— animuson

दिलचस्प। मुझे लगता है कि मैंने अन्य गुणों के साथ इसका परीक्षण नहीं किया था। जब मैंने कोशिश की तो color 0यह काम कर गया, लेकिन यह निश्चित रूप से साथ काम नहीं कर रहा है background-position 0। यहां तक ​​कि background 0मेरे लिए कोई परिणाम नहीं देता है ... यहाँ jsFiddle मैंने गेमिंग से लिया है। मेनू। सच कहूं तो मैंने केवल background-positionशुरुआत में भी परीक्षण किया है क्योंकि यही सवाल विशेष रूप से उल्लेख करता है और वह है जो मैं खुद को बदलने की कोशिश कर रहा था।

— animuson

यह मेरे लिए क्रोम पर काम करता था। यह अभी भी IE11 में काम कर रहा है, लेकिन इस सप्ताह के रूप में सभी संपत्ति अब लाइन पर बाद में कुछ भी ओवरराइड करती है।

— सिरस

जैसा कि @ सिरस ने कहा, क्रोम अब 0 सेकंड की अवधि का सम्मान नहीं करता है, लेकिन आप इसे बहुत कम अवधि देने के बजाय काम कर सकते हैं, जैसे.1ms

— GetFree

यदि कोई गैर-शून्य दूसरी अवधि की आपूर्ति की जाती है तो यह क्रोम और फ़ायरफ़ॉक्स दोनों पर काम करता है।

— नैशेल वर्धन

Answer 3

इसे इस्तेमाल करे...

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

Comments

"यह कोशिश करो" कोड-केवल उत्तर सर्वश्रेष्ठ नहीं हैं। बेहतर है कि आप क्या कर रहे हैं की कुछ व्याख्या है।

— random_user_name

Answer 4

आप मानक W3C तरीके का उपयोग करके देख सकते हैं:

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

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

Answer 5

किसी के लिए शॉर्टहैंड तरीके की तलाश में, देरी के साथ एक विशिष्ट संपत्ति को छोड़कर सभी गुणों के लिए संक्रमण जोड़ने के लिए , आधुनिक ब्राउज़रों के बीच अंतरों के बारे में पता होना चाहिए ।

नीचे एक सरल डेमो अंतर दिखाता है। की जाँच करें पूर्ण कोड

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

क्रोम नीचे दिए गए की तरह दो एनीमेशन (जो मुझे उम्मीद है) को "गठबंधन" करेगा:

जबकि सफ़ारी इसे "अलग करती है" (जिसकी उम्मीद नहीं की जा सकती है):

एक और अधिक सुसंगत तरीका यह है कि आप विशिष्ट संपत्ति के लिए विशिष्ट संक्रमण प्रदान करते हैं, यदि आपके पास उनमें से किसी एक के लिए देरी है।

Comments

वास्तव में। यह आलोचनात्मक अंतर्दृष्टि है। जैसा कि यह लंगड़ा है कि प्रत्येक संपत्ति को व्यक्तिगत रूप से निर्दिष्ट करना है बजाय allयह जानना उपयोगी है कि यह ब्राउज़र में वांछित व्यवहार प्राप्त करने का एकमात्र तरीका है।

— random_user_name

Answer 6

प्रयत्न:

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

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

Comments

पृष्ठभूमि-स्थिति को 0 पर ठीक करना = पृष्ठभूमि-स्थिति से संक्रमण को हटाने के लिए नहीं है। है ना?

— मिल्के पैटर

यह कभी काम नहीं कर सकता। बाद में संक्रमण संपत्ति को फिर से परिभाषित करके, आप पिछली संक्रमण संपत्ति को पूरी तरह से ओवरराइड करते हैं, जैसे कि यह कभी अस्तित्व में नहीं था। उन्हें समेकित नहीं किया जाता है।

— animuson