किसी तत्व पर एकाधिक सीएसएस संक्रमण कैसे हैं?

Question

यह एक बहुत ही सरल सवाल है लेकिन मुझे सीएसएस संक्रमण गुणों पर बहुत अच्छा दस्तावेज नहीं मिल रहा है।

.nav a 
{ 
    text-transform:uppercase; 
    text-decoration:none; 
    color:#d3d3d3; 
    line-height:1.5 em; 
    font-size:.8em; 
    display:block; 
    text-align:center; 
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); 
    -webkit-transition: color .2s linear; 
    -moz-transition: color .2s linear; 
    -o-transition: color .2s linear; 
    transition: color .2s linear; 
    -webkit-transition: text-shadow .2s linear; 
    -moz-transition: text-shadow .2s linear; 
    -o-transition: text-shadow .2s linear; 
    transition: text-shadow .2s linear; 
} 

.nav a:hover 
{ 
    color:#F7931E; 
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15); 
} 

आप देख सकते हैं, संक्रमण गुण eachother अधिलेखित कर रहे हैं: यहाँ सीएसएस टुकड़ा है। जैसा कि यह खड़ा है, टेक्स्ट-छाया एनिमेट करेगा, लेकिन रंग नहीं। मैं उन्हें एक साथ एनिमेट करने के लिए कैसे प्राप्त करूं? किसी भी उत्तर के लिए धन्यवाद।

Answer 1

संक्रमण गुण सभी ब्राउज़रों कि बदलाव का समर्थन में सीमांकित अल्पविराम रहे हैं:

.nav a { 
    -webkit-transition: color .2s, text-shadow .2s; 
    /* And so on... */ 
} 

आसानी है डिफ़ॉल्ट, इसलिए आपको इसे निर्दिष्ट करने की आवश्यकता नहीं है। यदि आप वास्तव में रैखिक चाहते हैं, तो आपको इसे निर्दिष्ट करने की आवश्यकता होगी, यानी -webkit-transition: color .2s linear, text-shadow .2s linear;

Answer 2

कुछ निम्नलिखित की तरह एक साथ कई बदलाव के लिए अनुमति देगा:

-webkit-transition: color .2s linear, text-shadow .2s linear; 
    -moz-transition: color .2s linear, text-shadow .2s linear; 
    -o-transition: color .2s linear, text-shadow .2s linear; 
     transition: color .2s linear, text-shadow .2s linear; 

उदाहरण: http://jsbin.com/omogaf/2

Answer 3

भी कर सकते हैं बस काफी के साथ:

.nav a { 
    -webkit-transition: all .2s; 
} 

Answer 4

यहाँ एक बार में दो गुण संक्रमण के लिए एक कम mixin है:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) { 
-webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; 
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; 
     -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; 
      transition: @transition1 @transition1-duration, @transition2 @transition2-duration; 
} 

Answer 5

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

Answer 6

आप आप सभी गुण एक ही एनिमेटेड रहे हैं, तो आप प्रत्येक अलग से सेट कर सकते हैं जो आपको कोड दोहराने की अनुमति नहीं देगा।

transition: all 2s; 
transition-property: color, text-shadow; 

वहाँ इसके बारे में यहाँ अधिक है: CSS transition shorthand with multiple properties?

मैं, संपत्ति सब (संक्रमण-संपत्ति अधिलेखित कर देता है 'सभी') का उपयोग कर से बचने के बाद से आप अवांछित व्यवहार और अप्रत्याशित प्रदर्शन हिट के साथ खत्म हो सकता है।

Answer 7

न भूल जाते हैं कि transition: all सफारी/iPad के लिए बहुत गाड़ी है: http://joelglovier.com/writing/solution-for-css-transitions-crashing-safari/