एक ही समय में 2 सीएसएस एनिमेशन निष्पादित करने वाला तत्व है

Question

मैं वेबकिट एनिमेशन के साथ प्रयोग कर रहा हूं।

क्या एचटीएमएल तत्व के लिए एक ही समय में एक से अधिक एनीमेशन निष्पादित करना संभव है?

उदाहरण के लिए:

@-webkit-keyframes FADE 
    { 
     from { 
      opacity: 0; 
     } 
     to { 
      opacity: 1; 
     } 
    } 

    @-webkit-keyframes TRICKY 
    { 
     0% { 
      -webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0); 
     } 
     50% { 
      -webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0); 
     } 
     75% { 
      -webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0); 
     } 
     100% { 
      -webkit-transform: translate(0px,0) rotate(0) skew(0,0); 
     } 
    } 

// Can this element have FADE execute for 5 seconds BUT halfway between that animation 
// can I then start the TRICKY animation & make it execute for 2.5 seconds? 
#myEle { 
    -Webkit-animation-name: FADE TRICKY; 
    -Webkit-animation-duration: 5s 2.5s; 
} 

ऊपर एक बहुत ही सरल उदाहरण था। मेरे पास घूर्णन, फीका इत्यादि जैसे एनिमेशन के कई पुस्तकालय होंगे और यदि मैं एक ही समय में एक तत्व निष्पादित करना चाहता हूं तो मैं एक विशेष एनीमेशन लिखना नहीं चाहता हूं।

यह संभव है ...

//Not sure if this is even valid CSS: can I merge 2 animations easily like this? 
@-webkit-keyframes FADETRICKY 
{ 
    FADE TRICKY; 
} 

Answer 1

आप मैन्युअल एनिमेशन विलय करने के लिए होगा, मुझे लगता है।

यदि आपको कई जगहों पर ऐसा कुछ उपयोग करने की आवश्यकता है तो मैं Less CSS या इसी तरह की एक नज़र डालें, ताकि आप सीएसएस उत्पन्न करने के लिए "मिश्रण" (उदाहरण के लिए फ़ंक्शंस) का उपयोग कर सकें। मैं विक्रेता विशिष्ट सीएसएस को सारणीबद्ध करने के लिए इसका उपयोग करता हूं ताकि मुख्य .less फ़ाइल में 5 या 6 ब्राउज़र विशिष्ट कोड की लाइनों को एक विधि द्वारा प्रतिस्थापित किया जा सके।

Answer 2

#myEle { 
    -Webkit-animation-name: FADE,TRICKY; 
    -Webkit-animation-duration: 5s,2.5s; 
} 

'स्पेस' का उपयोग करें। मैं कोशिश करने के लिए क्रोम संस्करण 16.0.899.0 में था।