CSS-Variablen und Animation

Question

Ich habe versucht, eine "mehrreihige" Sprite-CSS-Animation (davon: http://codepen.io/simurai/pen/vmhuJ) zu erstellen, nur um zu finden, dass Firefox background-position-x oder -y nicht unterstützt.

Der Mangel an -x/-y wird ausführlich hier beschrieben: https://bugzilla.mozilla.org/show_bug.cgi?id=550426 und eine vorgeschlagene Lösung (background-position-y doesn't work in Firefox (via CSS)?) ist CSS Variablen verwenden, die in Firefox vor kurzem eingeführt wurden.

Es sieht jedoch nicht so aus, als würde das Aktualisieren von CSS-Variablen aus der Animation @keyframes unterstützt?

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

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

Hier ist eine JSFiddle (Anmerkung: Firefox nur): http://jsfiddle.net/phoj0kq5/
Ich habe Grenzen, um die Animation flackern nur um sicherzustellen, dass es läuft, aber die Krabbe Snap nicht seine Finger .. Am I falsche Verwendung von CSS-Variablen, oder unterstützen sie Animation nicht?

bearbeitet

Aktualisiert Geige, die in Chrome tatsächlich funktioniert (noch nicht in Firefox): http://jsfiddle.net/phoj0kq5/1/

Answer 1

Dies ist keine Lösung, sondern eine Abhilfe, die helfen soll:

Da kann man nicht Zeigen Sie einen Teil des Bildes dynamisch an, wenn Spalten und Zeilen einzeln geändert werden. Verwenden Sie nur eine Spalte oder Zeile mit Bildteilen.

Wenn nur eine Zeile von Unterbildern verwendet wird, sollten Sie in der Lage sein, den angezeigten Teil mit background-position: X 0; festzulegen, während X Ihr Offset pro Bild ist. Sie müssen die angezeigte Bilddatei bearbeiten, um dies zu erreichen.

So das Layout der untergeordneten Bilder in der Bilddatei Form ändern:

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

zu:

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

Wie ich schon sagte, dies für das Problem keine Lösung selbst und eher das Problem zu umgehen, aber es sollte in allen Browsern funktionieren. Mozilla sollte jedoch die -x/-y-Attribute implementieren oder das CSS-Variablenproblem in Animationen beheben. Bis dahin sehe ich keine richtige Lösung dafür.