html - 如何删除间隙

Question

我正在用 CSS 制作动画。动画是一个 div 从右到左不停地移动。问题是当 div 到达最后一个时，有一个巨大的白色间隙，所以我不得不等待太多才能再次看到 div。我怎样才能消除这个差距？

我有一个 div 容器，其中包含移动的 div1，而 div1 有另一个带有 iframe 的 div。我知道这可能有点令人困惑，因此，任何更改我的代码或删除差距的建议都会有所帮助。这是我的 CSS 代码:

#container {
  height: 1200px;
  width: 8600px;
  /*border: 1px solid blue;*/
}
#div1 {
  float: right;
  height: 1200px;
  width: 8500px;
  overflow: hidden;
  border: 1px solid red;
  position: absolute;
  animation-duration: 90s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.div2 {
  float: left;
  height: 1100px;
  width: 1400px;
  /*border: 1px solid green;*/
  position: relative;
}
@keyframes move {
  0% {
    right: -8000px;
  }
  50% {
    right: 100%;
  }
  100% {
    right: 100%;
  }
}
iframe {
  height: 1000px;
  width: 1300px;
  /*iframes size*/
  border: none;
  /*MAKE ZOOM ON THE IFRAMES*/
  -ms-zoom: 1.2;
  -moz-transform: scale(1.2);
  -moz-transform-origin: 0 0;
  -o-transform: scale(1.2);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(1.2);
  -webkit-transform-origin: 0 0;
}

<div id="container">
  <div id="div1">
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
  </div>
</div>

Answer 1

看起来问题出在 @keyframes 配置中。我猜，动画从 0% 到 50% 结束，一半时间没有任何反应。因此，从 50% 到 100%，没有任何反应，所以请删除此处的 50% 声明:

@keyframes move {
  0% {
    right: -8000px;
  }
  /*
  50% {
    right: 100%;
  }
  */
  100% {
    right: 100%;
  }
}

工作片段

#container {
  height: 1200px;
  width: 8600px;
  /*border: 1px solid blue;*/
}
#div1 {
  float: right;
  height: 1200px;
  width: 8500px;
  overflow: hidden;
  border: 1px solid red;
  position: absolute;
  animation-duration: 90s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.div2 {
  float: left;
  height: 1100px;
  width: 1400px;
  /*border: 1px solid green;*/
  position: relative;
}
@keyframes move {
  0% {
    right: -8000px;
  }
  100% {
    right: 100%;
  }
}
iframe {
  height: 1000px;
  width: 1300px;
  /*iframes size*/
  border: none;
  /*MAKE ZOOM ON THE IFRAMES*/
  -ms-zoom: 1.2;
  -moz-transform: scale(1.2);
  -moz-transform-origin: 0 0;
  -o-transform: scale(1.2);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(1.2);
  -webkit-transform-origin: 0 0;
}

<div id="container">
  <div id="div1">
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
    <div class="div2">
      <iframe src="url" scrolling="no"></iframe>
    </div>
  </div>
</div>