CSS3無限ループアニメーション

Question

私がやろうとしているCSS3アニメーションに少し問題があります。

私は線/マーカーが移動する道路のアニメーションをしようとしています。今のところ現在は動作しますが、私はどのようにしたいのですか？

現在の位置から移動するにはマーカーが必要です（右からではなく、キーフレームは右から来るようにします）、左に移動します。私はまた、彼らは常にループをリセットするために&をループする必要がありますが、私はそれを行う方法が不明です。

body { 
 
    margin: 0 auto; 
 
} 
 
#road { 
 
    height: 75px; 
 
    background: #666666; 
 
    overflow: hidden; 
 
} 
 
.line { 
 
    width: 150px; 
 
    height: 15px; 
 
    background-color: #cccbcb; 
 
    margin: 30px 75px 0 0; 
 
    display: inline-block; 
 
    -webkit-animation: road infinite linear 4s 0s; 
 
} 
 

 
@keyframes road { 
 
    0% { transform: translateX(1000%); } 
 
    100% { transform: translateX(0%); } 
 
}

<div id="road"> 
 
    <div style="width: 100%;"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    </div> 
 
</div>

デモへのリンク：https://jsfiddle.net/ke4zzjg3/

任意のアイデア？

Answer 1

divラッパー（width: 100%;）を削除できますか？ #roadを100％の幅に設定することができます

ディスプレイに#roadを設定することができます。フレックスフローのような調整を使用して、矢印方向に&を配置し、中央に配置することができます。

line要素の幅が150pxなのでtranslateXを-150％（-150％のように）に設定することができます - >キーフレームの最後には最初の行が非表示になります。クラスプロパティでもtransformプロパティを設定する必要があります。

アニメーションが終了すると、2行目はアニメーションのない最初の行と同じ位置にあるため、変更を見ることはできません。 :)

あなたのアニメーションプロパティで、あなたが望むように道路の速度を調整します。 行の方向を反転させたい場合は、変換プロパティを反転するだけです。

body { 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
#road { 
 
    width: 1000%; 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    align-items: center; 
 
    
 
    height: 75px; 
 
    background: #666666; 
 
    overflow: hidden; 
 
} 
 
.line { 
 
    width: 150px; 
 
    height: 15px; 
 
    background-color: #cccbcb; 
 
    margin: 0 37.5px; 
 
    animation: road infinite linear 2s 0s; 
 
    
 
    transform: translateX(0%); 
 
} 
 

 
@keyframes road { 
 
    0% { transform: translateX(0%); } 
 
    100% { transform: translateX(-150%); } 
 
}

<div id="road"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
</div>