Variabili e animazioni CSS

Question

Stavo cercando di creare un'animazione CSS "multi-row" sprite (inclusa da questo: http://codepen.io/simurai/pen/vmhuJ), solo per scoprire che Firefox non supporta background-position-x o -y.

La mancanza di -x/-y è discusso a lungo qui: https://bugzilla.mozilla.org/show_bug.cgi?id=550426, e una soluzione proposta (background-position-y doesn't work in Firefox (via CSS)?) è quello di utilizzare variabili CSS, recentemente introdotte in Firefox.

Tuttavia, non sembra che l'aggiornamento delle variabili CSS dall'animazione @keyframes sia supportato?

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

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

Ecco un JSFiddle (nota: Firefox solo): http://jsfiddle.net/phoj0kq5/
ho aggiunto tremolante confini per l'animazione solo per assicurarsi che è in esecuzione, ma il granchio non si aggancia le dita .. Am I usando le variabili CSS errate o semplicemente non supportano l'animazione?

Modifica

violino aggiornato che funziona realmente in Chrome (ancora non in Firefox): http://jsfiddle.net/phoj0kq5/1/

Answer 1

Questa non è una soluzione, ma una soluzione che dovrebbe aiutare:

Dal momento che non è possibile mostra una parte dell'immagine in modo dinamico quando colonne e righe cambiano una alla volta, prova a utilizzare solo una colonna o una riga di parti dell'immagine.

Quando si utilizza solo una riga di immagini secondarie, è possibile impostare la parte visualizzata con background-position: X 0; mentre X è l'offset per immagine. Dovrai modificare il file immagine che stai visualizzando per raggiungere questo obiettivo.

Quindi cambiare il layout di immagini parziali sotto forma di file immagine:

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

a:

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

Come ho già detto, questa non è una soluzione al problema in sé e piuttosto una soluzione, ma dovrebbe funzionare bene su tutti i browser. Tuttavia, Mozilla dovrebbe implementare gli attributi -x/-y o correggere il problema delle variabili CSS nelle animazioni. Fino ad allora, non vedo una soluzione adeguata per questo.