CSS variables and animations

Question

I tried to create animated CSS animations with multiple lines (not tied to it: http://codepen.io/simurai/pen/vmhuJ ), only to find that Firefox does not support background-position-x or -y .

The lack of -x/-y discussed in detail here: https://bugzilla.mozilla.org/show_bug.cgi?id=550426 and the proposed solution ( does background-position-y not work in Firefox (via CSS)? ) Consists in using variables CSS recently introduced in Firefox.

However, it seems that updating CSS variables from the animation is supported by @keyframes ?

 ... background-position: var(--bgX) var(--bgY); ... /*Here, CSS variables don't work:*/ @keyframes move-y { from { --bgY: 0px; } to { --bgY: -670px; } } 

Here is the JSFiddle (note: Firefox only): http://jsfiddle.net/phoj0kq5/
I added flickering borders to the animation to make sure that it works, but the crab does not click its fingers. Am I using CSS variables incorrectly or just doesn’t support animation?

Edit

Updated script that 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 part of the image dynamically when cols and rows change one at a time, try using only one column or a series of parts of the image.

When only one line of sub-images is used, you should be able to set the viewed part using background-position: X 0; , and X is your image offset. You will need to edit the image file that you display in order to achieve this.

So, change the location of the subimages in the form of an image file:

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

in

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

As I said, this is not a solution to the problem itself, but rather a workaround, but it should work well on all browsers. However, Mozilla must implement the -x / -y attributes or fix the CSS variable problem in the animation. Until then, I do not see the right solution for this.