CSS 变量和动画

Question

我试图制作一个“多行”精灵 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)?) 是使用 CSS 变量，它最近在 Firefox 中引入。 p>

不过，好像不支持从动画@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 中实际工作的小提琴（仍然不在 Firefox 中）：http://jsfiddle.net/phoj0kq5/1/

Answer 1

这不是一个解决方案，而是一个应该有帮助的解决方法：

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

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

所以改变图片文件形式中子图片的布局：

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

到：

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

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