सीएसएस चर और एनीमेशन

Question

मैं एक "बहु-पंक्ति" स्प्राइट सीएसएस एनीमेशन (इस द्वारा निपटाया गया: http://codepen.io/simurai/pen/vmhuJ) बनाने के लिए प्रयास कर रहा था, केवल यह पता लगाने के लिए कि फ़ायरफ़ॉक्स background-position-x या -y का समर्थन नहीं करता है।

-x/-y की कमी यहां विस्तार से चर्चा की है: https://bugzilla.mozilla.org/show_bug.cgi?id=550426, और एक प्रस्तावित समाधान (background-position-y doesn't work in Firefox (via CSS)?) सीएसएस चर है, जो हाल ही में फ़ायरफ़ॉक्स में शुरू किए गए थे उपयोग करने के लिए है।

हालांकि, यह एनीमेशन @keyframes से सीएसएस चर अद्यतन करने की तरह दिखता नहीं है? http://jsfiddle.net/phoj0kq5/
मैं जोड़ा एनीमेशन के लिए सीमाओं को झिलमिलाते सिर्फ यकीन है कि यह चल रहा है बनाने के लिए है, लेकिन केकड़ा अपनी उंगलियों तस्वीर नहीं है .. एम आई:

... 
background-position: var(--bgX) var(--bgY); 
... 

/*Here, CSS variables don't work:*/ 
@keyframes move-y { 
    from { 
    --bgY: 0px; 
    } 
    to { 
    --bgY: -670px; 
    } 
} 

यहाँ एक JSFiddle (: फ़ायरफ़ॉक्स केवल टिप्पणी) है सीएसएस चर का प्रयोग गलत है, या वे एनीमेशन का समर्थन नहीं करते हैं?

संपादित

बेला अपडेट किया गया जो वास्तव में क्रोम में (अब भी नहीं फ़ायरफ़ॉक्स में) काम करता है: http://jsfiddle.net/phoj0kq5/1/

Answer 1

यह एक समाधान नहीं है, लेकिन एक समाधान की मदद करनी चाहिए कि:

जब से तुम नहीं कर सकते हैं छवियों का एक हिस्सा गतिशील रूप से दिखाएं जब एक समय में कोल्स और पंक्तियां बदल रही हों, केवल छवियों के एक स्तंभ या पंक्ति का उपयोग करने का प्रयास करें।

जब उप-छवियों की केवल एक पंक्ति का उपयोग किया जाता है, तो आप प्रति दृश्य को background-position: X 0; के साथ सेट करने में सक्षम होना चाहिए जबकि एक्स प्रति छवि आपका ऑफ़सेट है। आपको यह प्राप्त करने के लिए दिखाए जा रहे छवि फ़ाइल को संपादित करने की आवश्यकता होगी।

तो छवि फ़ाइल के रूप में subimages का लेआउट परिवर्तित:

☺☺☺☺ 
☺☺☺☺ 
☺☺☺☺ 

रहे हैं:

☺☺☺☺☺☺☺☺☺☺☺☺ 

जैसा कि मैंने कहा इस समस्या ही है और नहीं बल्कि एक समाधान करने के लिए एक समाधान नहीं है, लेकिन यह सभी ब्राउज़रों पर ठीक काम करना चाहिए। हालांकि, मोज़िला को -x/-y विशेषताओं को कार्यान्वित करना चाहिए या एनिमेशन में सीएसएस-परिवर्तनीय समस्या को ठीक करना चाहिए। तब तक, मुझे इसके लिए उचित समाधान नहीं दिख रहा है।