Question

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

我有一个非常基本的动画来在页面上移动一个大的gif，gif是1536px宽。

页面可以无限宽，因此动画从右侧开始：0px，右侧结束：100％。实际上，我并不期望该页面会比当前使用的最高显示器分辨率更大。

为了创造动画无限发生的感觉，我创造了第二个动画并在右边开始：-1536px并在右边结束：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

<强>更新

更好的解决方案是从https://stackoverflow.com/a/21088405/603369

调整Oriol的评论

它提供了一个平滑滚动的背景，所以剩下的就是在页面加载时将背景元素设置为“飞入”。

问题是初始“飞入”必须基于容器的宽度（例如，页面），而重复背景必须基于背景图像的宽度。这导致了一些奇怪的定时，其中来自右侧的初始“飞入”可能比背景动画明显更快或更慢。您可以通过使用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动画设置为相同的速度，一个行进更长的距离？

1 个答案: