एक इनलाइन एनीमेशन keyframes परिभाषा का उपयोग कर?

Question

हम एक सीएसएस फ़ाइल में महत्वपूर्ण फ्रेम को परिभाषित करने के लिए वाक्य रचना की इस तरह है:

@-webkit-keyframes fade { 
    from {opacity: 1;} 
    to {opacity: 0.25;} 
} 

और हम इसे पसंद संदर्भ:

.foo { 
    -webkit-animation: fade 1s linear infinite; 
} 

वहाँ एक रास्ता बस इसे इनलाइन करने के लिए है, जैसे:

.foo { 
    -webkit-animation: (from {opacity: 1;} to {opacity: 0.25;}) 1s linear infinite; 
} 

क्या ऐसा करने का कोई तरीका है, या रनटाइम पर मेरी स्टाइलशीट में "@ -webkit-keyframes" तत्व इंजेक्ट करना है?

धन्यवाद

Answer 1

W3C CSS Animations WD पर एक नज़र लेते हुए animation आशुलिपि संपत्ति के लिए वाक्य रचना है:

[<animation-name> || <animation-duration> || <animation-timing-function> || 
<animation-delay> || <animation-iteration-count> || <animation-direction> || 
<animation-fill-mode>] [, [<animation-name> || <animation-duration> || 
<animation-timing-function> || <animation-delay> || <animation-iteration-count> || 
<animation-direction> || <animation-fill-mode>] ]* 

अर्थ यह केवल animation-name जिस पर नियम में प्रावधान है कि मुख्य-फ़्रेम का चयन करने के लिए किया जाता है लेता है एनीमेशन के लिए संपत्ति मूल्य, उसके बाद अन्य पैरामीटर जो परिभाषित करते हैं कि इन नियमों को कैसे निष्पादित किया जाना चाहिए।

वर्तमान में चश्मे में परिभाषित कोई शॉर्टंड सिंटैक्स नहीं है जो इनलाइन नियम में इनलाइन कीफ्रेम को परिभाषित करने की अनुमति देगा, आपको animation-name संपत्ति का उपयोग कर मौजूदा व्यक्ति को संदर्भित करना होगा। specs से:

'एनीमेशन-नाम' संपत्ति लागू होने वाले एनिमेशन की एक सूची को परिभाषित करती है। प्रत्येक नाम का उपयोग keyframe एट-नियम का चयन करने के लिए किया जाता है जो एनीमेशन के लिए संपत्ति मान प्रदान करता है। यदि नाम किसी भी keyframe एट-नियम से मेल नहीं खाता है, तो एनिमेटेड होने के लिए कोई गुण नहीं हैं और एनीमेशन निष्पादित नहीं होगा।