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在Firefox中不起作用(通过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中运行的更新小提琴(仍然不在Firefox中):http://jsfiddle.net/phoj0kq5/1/

Answer 1

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

\n\n

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

\n\n

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

\n\n

因此，更改图像文件形式中子图像的布局：

\n\n

\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\n\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\n\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\n

\n\n

到：

\n\n

\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\xe2\x98\xba\n

\n\n

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

\n