在一個循環中移動元素

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>