在循环中移动元素

Question

我正在尝试从右向左移动这些框的父级，并且我已将动画设置为循环。

＆＃13;

＆＃13;

@keyframes move {
  to {
    left: -200px;
  }
}
#container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  animation-name: move;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.box {
  display: inline-block;
  width: 200px;
  height: 100px;
  background: red;
  margin: 10px;
}

＆＃13;

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

正如你在上面看到的那样，动画移动div并回到它的位置。我想要的是继续向左移动，一旦屏幕上的元素我想从屏幕右侧返回并进入左侧屏幕......

我知道单靠CSS是不可能的。我如何使用css / JavaScript实现这一目标。

  

我想要实现的图解

我希望一旦开始穿越屏幕，我希望它从相反的方向开始回到屏幕。

Answer 1

如果我正确理解了您的问题，那么您正在寻找类似下面代码段的内容。如果是这样你就不需要javascript，css就足够了。

如果你想让它相对于窗口宽度隐藏，你的盒子需要是流动的（百分比而不是固定的px）。你可以玩这些值。

如果你想要固定宽度，你可以创建一个固定宽度的包装器，并将其设置为溢出隐藏

＆＃13;

＆＃13;

/* Fluid */
@keyframes move-1 {
  to {
    left: -50%;
  }
}
@keyframes move-2 {
  to {
    left: -20%;
  }
}
#container {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.box {
  position: absolute;
  display: inline-block;
  width: 20%;
  height: 100px;
  background: red;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.box:nth-child(1) {
  animation-name: move-1;
  left: 100%;
}
.box:nth-child(2) {
  animation-name: move-2;
  left: 130%;
}



/* Fixed */
@keyframes move-3 {
  to {
    left: -440px;
  }
}
@keyframes move-4 {
  to {
    left: -220px;
  }
}
#container2 {
  width: 200px;
  height: 100px;
  border: 1px solid lightgrey;
  overflow: hidden;
  position: relative;
}

.box2 {
  position: absolute;
  display: inline-block;
  width: 200px;
  height: 100px;
  background: red;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.box2:nth-child(1) {
  animation-name: move-3;
  left: 220px;
}
.box2:nth-child(2) {
  animation-name: move-4;
  left: 440px;
}

＆＃13;

<h2>Fluid Container</h2>
<div id="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

<h2>Fixed Container</h2>
<div id="container2">
  <div class="box2"></div>
  <div class="box2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;