1

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

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

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

为了营造动画无限发生的感觉，我创建了第二个动画，并从右：-1536px 开始，在右：100% 结束。

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

任何帮助或想法表示赞赏！

我的代码如下：

@-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;
}
4

1 回答 1

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>

于 2015-08-06T14:42:34.417 回答