将两个 webkit 动画设置为相同的速度，而一个行进的距离更长？

Question

[编辑：解决方案是创建两个容器，第二个动画容器设置为左侧：100%。]

我有一个非常基本的动画，可以在页面上移动一个大 gif，gif 是 1536 像素宽。

页面可以无限宽，因此动画从 right:0px 开始并在 right:100% 结束。实际上，我不希望页面大于当前使用的最高显示器分辨率。

为了创造动画无限发生的感觉，我创建了第二个动画并在右侧开始：-1536px 并在 right:100%.

处结束

不幸的是，由于第二个动画覆盖的距离更远，它比第一个动画移动得更快，我尝试的无缝动画不起作用。有没有一种方法可以指定动画持续时间以每秒 1px 的恒定速度或等效的东西而不是持续时间来工作？我不相信我可以增加持续时间来匹配，因为浏览器可以是任何大小。

感谢任何帮助或想法！

我的代码如下：

@-webkit-keyframes frontrocks-anim2 {
  0%{right:-1536px;}
  100%{right:100%;}
}

@-moz-keyframes frontrocks-anim2 {
  0%{right:-1536px;}
  100%{right:100%;}
}

.frontrocks-anim2 {
    -webkit-animation:frontrocks-anim2 30s infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay: 0s;
    -moz-animation:frontrocks-anim2 30s infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-delay: 0s;
}

Answer 1

更新

更好的解决方案是改编 Oriol 来自

的评论

这提供了平滑滚动的背景，所以剩下的就是在页面加载时将背景元素设置为 "fly in" 的动画。

问题是初始"fly-in"必须基于容器（例如页面）的宽度，而重复背景必须基于背景图像的宽度。这导致了一些时间上的奇怪，右侧的初始 "fly-in" 可能明显快于或慢于背景动画。您可以通过使用 JavaScript 根据页面宽度调整时间来进一步调整此解决方案，但这应该给您一个起点。

header {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 52px;
  border: 1px solid #ccc;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: -1536px;
  background: url(https://placehold.it/1536x50/cceecc) 0% 0% repeat;
  z-index: -1;

  -webkit-animation-name: slide-in, bg-anim-repeat;
  -webkit-animation-duration: 5s, 5s;
  -webkit-animation-timing-function: linear, linear;
  -webkit-animation-iteration-count: 1, infinite;
  -webkit-animation-delay: 0s, 5s;
}

@-webkit-keyframes bg-anim-repeat {
  0% {-webkit-transform: translateX(0);}
  100% {-webkit-transform: translateX(-1536px);}
}

@-webkit-keyframes slide-in {
  0% {left: 100%;}
  100% {left: 0;}
}

<header>
  <div class="bg"></div>
</header>

原创

如果页面大于 1536x2，当两个 gif 图像在屏幕上移动时，您的视觉效果会很奇怪。但如果这是你想要的，请尝试将第二个动画的开始延迟到第一个动画的一半。

第二个选项的演示如下

header {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 52px;
  border: 1px solid #ccc;
}

header img {
  position: absolute;
  left: 100%;
}

@-webkit-keyframes frontrocks-anim {
  0%{left:100%;}
  100%{left:-1536px;}
}

#image1, #image2 {
    -webkit-animation:frontrocks-anim 10s infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay: 0s;
    -moz-animation:frontrocks-anim 10s infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-delay: 0s;
}
/* Delay is 1/2 of the total animation time */
#image2 {
    -moz-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

<header>
<img src="https://placehold.it/1536x50/cceecc" alt="moving image 1" id="image1">
<img src="https://placehold.it/1536x50/eecccc" alt="moving image 1" id="image2">
</header>

将两个 webkit 动画设置为相同的速度，而一个行进的距离更长？

Set two webkit-animations to be same speed with one travelling a longer distance?

html

css

animation

webkit-animation