css - 尝试在 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 和 3 失败。

Answer 1

所以在尝试之后我还没有找到只使用 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 在每次视口(viewport)更改时重新绘制 div。