尝试在Chrome中创建无限滚动横幅

Question

我花了一整天时间尝试使用CSS3动画制作无限滚动横幅。这些是我的要求：

1. 横幅宽度必须跨越整个页面;
2. 无论浏览器窗口有多大或多小，动画都必须完美循环;
3. 对于不同的浏览器窗口大小，滚动速度必须一致;
4. 调整大小或缩放不得违反上述任何要求;
5. 必须适用于大多数浏览器（至少是Chrome和IE）。

This is how far I've come in JSFiddle.它适用于IE，但不适用于Chrome。

在Chrome中缩小时，您可以看到横幅的结尾。正如@bjb568所指出的，可以通过设置width: 1000%来解决此问题。但是，如果在缩小后刷新页面并缩小到100％，您将看到它不再完美循环，并且滚动速度比以前慢很多。

由于某些原因，这对Chrome的缩放功能效果不佳。我尝试使用em，但没有解决它。有人可以帮帮我吗？

---

Tl; dr：在Chrome中，在缩小，刷新和放大后，要求2＆amp; 3失败。

Answer 1

http://jsfiddle.net/sREjt/1/

width: 1000%;

让它变得巨大。然后除非你快速缩放，否则不会有问题。

适用于Chrome，Safari和FireFox。

Answer 2

因此，在尝试使用CSS之后我还没有找到解决方案，但我很确定Chrome中的速度问题与使用calc有关：

calc() width在开头计算，然后它具有宽度并指定速度以在您设置的时间内完成动画（5s）。因此，根据呈现页面时100% + 600px的长度，无论您事后调整大小，该速度设置都是您获得的速度。

解决问题的一个可能的解决方案是每次缩放更改时强制element to repaint，这需要一点JS。

http://jsfiddle.net/marczking/sREjt/14/

这可以解决您的速度问题，因为Chrome会在缩放时重新计算宽度和速度。

希望这有帮助。

<强>更新

所以我假设问题是由使用calc引起的，这是不正确的，因为@ bjb568评论道。在他的回答中，他只使用了百分比而没有使用calc但他的结果中存在同样的问题。

在缩放时，Chrome会更改div的宽度（不添加任何其他JS）。因此，Chrome会按照您期望的方式处理此问题。

Chrome实际上没有做的是重新绘制（重新计算）动画，一个是在加载时设置的。要解决此问题，您需要额外的JS告诉Chrome每次视口更改时重新显示div。