使用非常大的背景位置偏移是否存在性能问题？

Question

我正在建立一个进度条控件，我正在研究它实际上并没有显示进度的情况，而只是旋转指示“正在发生的事情”。我的设计基本上是交替的斜条纹，基本上是一个像这样的理发杆，但“旋转”：

希望尽可能多地卸载到渲染引擎，我想为此使用CSS转换。 支持旧浏览器对我来说不是一个问题。

所以，我的第一个想法是基本上这样做：

.barber-pole {
    background-image: url(repeating-slice.png);

    /* set a very long (one hour!) transition on the background-position */
    transition: background-position 3600s linear 0s;
}

...然后，当它被渲染到屏幕时，使用Javascript基本上这样做：

myBarberPole.style.backgroundPosition = '-1000000px 0';

是否有任何性能问题：

1. 过渡那么久
2. 有background-position: -1000000px 0？

或者，您有更好的解决方案吗？

Answer 1

我认为不存在任何性能问题。这不是因为你使用大号码而是使用更多的CPU或内存。

Answer 2

在没有“链接”过渡到他们自己的情况下（据我所知，没有纯粹的CSS方式告诉转换何时结束）这可能是一个很好的解决方案，但正如Justin所说它需要大量的图像！使用一个好的老式动画GIF有什么问题吗？