Zmienne CSS i animacja

Question

Próbowałem utworzyć animację CSS "multi-row" z CSS (insipred by: http://codepen.io/simurai/pen/vmhuJ), ale okazało się, że Firefox nie obsługuje background-position-x ani -y.

Brak -x/-y omówiono obszernie tutaj: https://bugzilla.mozilla.org/show_bug.cgi?id=550426, a proponowane rozwiązanie (background-position-y doesn't work in Firefox (via CSS)?) jest użycie zmiennych CSS, które niedawno zostały wprowadzone w Firefoksie.

Jednak nie wygląda na to, że aktualizacja zmiennych CSS z animacji jest obsługiwana w postaci @keyframes?

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

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

Oto JSFiddle (uwaga: Firefox tylko): http://jsfiddle.net/phoj0kq5/
dodałem migotanie obramowania do animacji tylko upewnić się, że to działa, ale nie kraba przystawki swoje palce .. Am I używając niewłaściwych zmiennych CSS lub po prostu nie obsługują animacji?

Edit

Updated skrzypce, które faktycznie działa w Chrome (jeszcze nie w Firefoksie): http://jsfiddle.net/phoj0kq5/1/

Answer 1

To nie jest rozwiązanie, ale obejście, które powinny pomóc:

Ponieważ nie można pokazuj część obrazu dynamicznie, gdy kolce i wiersze zmieniają się pojedynczo, spróbuj użyć tylko jednej kolumny lub rzędu części obrazu.

Gdy używana jest tylko jedna linia podobrazów, powinieneś mieć możliwość ustawienia oglądanej części za pomocą background-position: X 0;, podczas gdy X jest twoim przesunięciem na obraz. Aby to osiągnąć, musisz edytować plik obrazu, który wyświetlasz.

więc zmienić układ wyświetlać osobno w postaci pliku obrazu:

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

do:

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

jak powiedziałem, nie jest to rozwiązanie do samego problemu i raczej obejście, ale powinno działać dobrze we wszystkich przeglądarkach. Jednak Mozilla powinna implementować atrybuty -x/-y lub naprawić problem z zmienną CSS w animacjach. Do tego czasu nie widzę odpowiedniego rozwiązania.