CSS变量和动画

Question

我试图制作一个“多行” Sprite CSS 动画(受此启发:http://codepen.io/simurai/pen/vmhuJ)，却发现 Firefox 不支持 background-position-x 或 -y.

此处详细讨论了缺少 -x/-y:https://bugzilla.mozilla.org/show_bug.cgi?id=550426 , 并且建议的解决方案 ( background-position-y doesn't work in Firefox (via CSS)? ) 是使用最近在 Firefox 中引入的 CSS 变量。

但是，似乎不支持从动画 @keyframes 更新 CSS 变量？

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

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

这是一个 JSFiddle(注意:仅限 Firefox):http://jsfiddle.net/phoj0kq5/
我在动画中添加了闪烁的边框只是为了确保它正在运行，但是螃蟹没有打响指。我是不是使用了 CSS 变量错误，或者它们根本不支持动画？

编辑

在 Chrome 中实际工作的更新 fiddle (仍然不在 Firefox 中):http://jsfiddle.net/phoj0kq5/1/

Answer 1

这不是解决方案，而是应该有所帮助的解决方法:

由于当 cols 和 rows 一次改变一个时，您无法动态显示图像的一部分，请尝试仅使用一列或一行图像部分。

当只使用一行子图像时，您应该能够使用 background-position: X 0; 设置查看的部分，而 X 是每个图像的偏移量。您需要编辑显示的图像文件才能实现此目的。

因此改变图像文件形式中子图像的布局:

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

到:

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

正如我所说，这不是问题本身的解决方案，而是一种解决方法，但它应该在所有浏览器上都能正常工作。但是，Mozilla 应该实现 -x/-y 属性或修复动画中的 CSS 变量问题。在那之前，我没有看到合适的解决方案。