CSS variables and animation

Question

I was trying to make a "multi-row" sprite CSS animation (insipred by this: http://codepen.io/simurai/pen/vmhuJ), only to find that Firefox doesn't support background-position-x or -y.

The lack of -x/-y is discussed at length here: https://bugzilla.mozilla.org/show_bug.cgi?id=550426, and a proposed solution (background-position-y doesn't work in Firefox (via CSS)?) is to use CSS variables, which were recently introduced in Firefox.

However, it doesn't look like updating CSS variables from animation @keyframes is supported?

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

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

Here is a JSFiddle (note: Firefox only): http://jsfiddle.net/phoj0kq5/
I added flickering borders to the animation just to make sure it's running, but the crab doesn't snap its fingers.. Am I using CSS variables wrong, or do they simply not support animation?

Edit

Updated fiddle which actually works in Chrome (still not in Firefox): http://jsfiddle.net/phoj0kq5/1/

Answer 1

This is not a solution, but a workaround that should help:

Since you cannot show a part of the image dynamically when cols and rows are changing one at a time, try using only one column or row of image parts.

When only one line of sub-images is used, you should be able to set the viewed part with background-position: X 0; while X is your offset per image. You will need to edit the image file you are showing to achieve this.

So change the layout of subimages in the image file form:

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

to:

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

As i said, this is not a solution to the problem itself and rather a workaround, but it should work fine on all browsers. However, Mozilla should implement the -x/-y attributes or fix the CSS-variable issue in animations. Until then, i don't see a proper solution for this.