在一个循环中移动元素

Question

我想从右到左移动这些框的父母，并且我已经在循环中设置了动画。

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

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

，你可以看到上面的animaiton移动div和回到原处。我想要的是它继续移动到左侧，一旦屏幕中的元素我想要从屏幕右侧回来并进入左侧屏幕...

我知道这是不可能的单独使用CSS。我怎样才能实现这个使用CSS/JavaScript。

什么，我想尽快acheive

我想作为开始穿越我希望它开始从相反方向回正在添加到屏幕画面图示。

Answer 1

如果我正确理解你的问题，你正在寻找类似下面的代码片段。如果是这种情况，你不需要JavaScript，CSS就足够了。

如果您希望它隐藏相对于窗口宽度，您的框需要流体（百分比，而不是固定px）。你可以玩这些值。

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

/* 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; 
 
}

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