7

我试图制作一个“多行”精灵 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/

4

1 回答 1

1

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

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

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

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

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

至：

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

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

于 2015-11-09T10:57:38.873 回答