如何删除差距

Question

我正在用CSS做动画。动画是div从右到左不停地移动。问题是，当div到达决赛时，存在巨大的白色差距，所以我必须等待太多再看看div。我该如何删除这个空白？

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题出现在@keyframes配置中。我想，动画从0%结束到50%，并且在一半的时间内没有任何事情发生。因此，从50%到100%，没有任何反应，请在此处删除50%声明：

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

工作代码段

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;