ロゴカルーセルとCSSマーキーのような効果

Question

私はロゴスライダーを作成する際に助けが必要です。 ロゴのスライダーの終わりにそれがフリックします。私はそれを連続的にするために重複したものを使用しました。

translateX値を使用してアニメーション化しました。

.box { 
 
    width: 600px; 
 
    //overflow: hidden; 
 
    margin: 100px auto; 
 
    position: relative; 
 
    background: white; 
 
    height: 100px; 
 
    padding: 20px; 
 
} 
 

 
.lst-box { 
 
    //white-space: nowrap; 
 
    animation: loop 6s linear infinite; 
 
    position: absolute; 
 
    width: 2500px; 
 
    left: 0; 
 
} 
 

 
.lst-box li { 
 
    display: inline-block; 
 
    width: 49%; 
 
    float: left; 
 
} 
 

 
.lst-box li .item { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: tomato; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    font-size: 50px; 
 
    color: white; 
 
    display: inline-block; 
 
} 
 

 
@keyframes loop { 
 
    0% { 
 
    left: 0; 
 
    } 
 
    100% { 
 
    left: -200%; 
 
    } 
 
} 
 

 
.lst-box li:nth-child(2) .item { 
 
    background: green; 
 
}

<div class="box"> 
 
    <ul class="lst-box"> 
 
    <li> 
 
     <div class="item">1</div> 
 
     <div class="item">2</div> 
 
     <div class="item">3</div> 
 
     <div class="item">4</div> 
 
     <div class="item">5</div> 
 
     <div class="item">6</div> 
 
    </li> 
 
    <li> 
 
     <div class="item">1</div> 
 
     <div class="item">2</div> 
 
     <div class="item">3</div> 
 
     <div class="item">4</div> 
 
     <div class="item">5</div> 
 
     <div class="item">6</div> 
 
    </li> 
 
    </ul> 
 
</div>

https://jsfiddle.net/vg7c5aan/1/

Answer 1

.parent{ 
 
    padding: 10px; 
 
    background: tomato; 
 
} 
 
.box{ 
 
    width: 358px; 
 
    height: 40px; 
 
    margin: 0 auto; 
 
} 
 
ul{ 
 
    position: relative; 
 
    list-style: none; 
 
    padding: 0; 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 
li div{ 
 
    width: 60px; 
 
    height: 40px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    margin-right: -4px; 
 
} 
 
li{ 
 
    position: absolute; 
 
    background: white; 
 
    margin-right: -4px; 
 
} 
 
.one div:nth-child(odd){ 
 
    background: orange; 
 
} 
 

 
.two div:nth-child(odd){ 
 
    background: green; 
 
} 
 
.one{ 
 
    animation: loop 4s linear infinite; 
 
} 
 
.two{ 
 
    animation: looptwo 8s linear infinite; 
 
    /*transform: translate(100%,0); 
 
    margin-left: 4px;*/ 
 
} 
 
@-webkit-keyframes loop { 
 
    0% { 
 
    transform: translate(0,0); 
 
    } 
 
    50% { 
 
    transform: translate(-100%,0); 
 
    } 
 
    50.1%{ 
 
    transform: translate(100%,0); 
 
    } 
 
    100%{ 
 
    transform: translate(0,0); 
 
    } 
 
} 
 
@-webkit-keyframes looptwo { 
 
    0% { 
 
    transform: translate(100%,0); 
 
    } 
 
    50% { 
 
    transform: translate(-100%,0); 
 
    } 
 
    50.1%{ 
 
    transform: translate(100%,0); 
 
    } 
 
    100%{ 
 
    transform: translate(-100%,0); 
 
    } 
 
}

<div class="parent"> 
 
<div class="box"> 
 
    <ul class="lst-box"> 
 
    <li class="one"> 
 
     <div class="item">1</div> 
 
     <div class="item">2</div> 
 
     <div class="item">3</div> 
 
     <div class="item">4</div> 
 
     <div class="item">5</div> 
 
     <div class="item">6</div> 
 
    </li> 
 
    <li class="two"> 
 
     <div class="item">21</div> 
 
     <div class="item">22</div> 
 
     <div class="item">23</div> 
 
     <div class="item">24</div> 
 
     <div class="item">25</div> 
 
     <div class="item">26</div> 
 
    </li> 
 
    </ul> 
 
</div> 
 
</div>