CSS3アニメーション遅延を計算してスライドエフェクトを作成する

Question

アニメーションの遅れに関する質問があります。私は6つの画像のリストを持っているので、私は自動スライディングカルーセル効果を作成したいと思います。だから私はすでにCSSアニメーションの翻訳を通しています。しかし、画像が実行されるタイミングがうまく計算されていないため、画像を見ると、画像が一時的に重なり合うことになります。私が達成したいのは、イメージが重なり合わず、滑らかにループで動くようにすることです。私はフィドルを作りました。ここ

.banner ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 300px; 
    height: 200px; 
    display: inline-block; 
    position: relative; 
} 

.banner ul li { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    animation: coverflow 9.5s ease infinite; 
} 

    .banner ul li:nth-child(2) { 
    animation-delay: 1.5s; 
} 
.banner ul li:nth-child(3) { 
    animation-delay: 3s; 
} 
.banner ul li:nth-child(4) { 
    animation-delay: 4.5s; 
} 
.banner ul li:nth-child(5) { 
    animation-delay: 6s; 
} 
.banner ul li:nth-child(6) { 
    animation-delay: 7.5s; 
} 
.banner ul li:nth-child(7) { 
    animation-delay: 9s; 
} 

.banner ul li img { 
    width: 100%; 
    height: 100%; 
} 


@keyframes 
coverflow { 
0%, 10% { 
opacity: 1; 
transform: none; 
z-index: 10; 
} 
25%, 35% { 
opacity: 0.2; 
transform: translate3d(-170px, 0, 0) scale(0.6); 
} 
50% { 
opacity: 0; 
transform: translate3d(-190px, 0, 0) scale(0.6); 
} 
60% { 
opacity: 0; 
transform: translate3d(190px, 0, 0) scale(0.6); 
} 
75%, 85% { 
opacity: 0.2; 
transform: translate3d(170px, 0, 0) scale(0.6); 
} 
} 

フィドルはあなたが非常に https://jsfiddle.net/4anedqzp/2/

のおかげです。

Answer 1

あなたはこれを試すことがあります。

私は重複を避けるために、新しい状態から開始するようにアニメーションを作りました。私はまた、継続時間を9sに変更し、常に同じサイクルを持つようにしました。

.banner { 
 
    text-align: center; 
 
} 
 

 
.banner ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 300px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.banner ul li { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: coverflow 9s ease infinite; 
 
    opacity: 0.2; 
 
    z-index: -1; 
 
    transform: translate3d(170px, 0, 0) scale(0.6); 
 
} 
 

 
.banner ul li:nth-child(2) { 
 
    animation-delay: 1.5s; 
 
} 
 

 
.banner ul li:nth-child(3) { 
 
    animation-delay: 3s; 
 
} 
 

 
.banner ul li:nth-child(4) { 
 
    animation-delay: 4.5s; 
 
} 
 

 
.banner ul li:nth-child(5) { 
 
    animation-delay: 6s; 
 
} 
 

 
.banner ul li:nth-child(6) { 
 
    animation-delay: 7.5s; 
 
} 
 

 
.banner ul li:nth-child(7) { 
 
    animation-delay: 9s; 
 
} 
 

 
.banner ul li img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
@keyframes coverflow { 
 
    0%, 
 
    10% { 
 
    opacity: 0.2; 
 
    z-index: -1; 
 
    transform: translate3d(170px, 0, 0) scale(0.6); 
 
    } 
 
    10%, 
 
    25% { 
 
    opacity: 1; 
 
    transform: none; 
 
    } 
 
    25%, 
 
    45% { 
 
    opacity: 0.2; 
 
    z-index: -1; 
 
    transform: translate3d(-170px, 0, 0) scale(0.6); 
 
    } 
 
    60% { 
 
    opacity: 0; 
 
    z-index: -1; 
 
    transform: translate3d(-190px, 0, 0) scale(0.6); 
 
    } 
 
    70% { 
 
    opacity: 0; 
 
    z-index: -1; 
 
    transform: translate3d(190px, 0, 0) scale(0.6); 
 
    } 
 
}

<div class="banner"> 
 
    <ul> 
 
    <li><img src="https://lh3.googleusercontent.com/wdFgfoxO5xFb5s194SbECtHEe-HU3BfM5MqL3896G1esFN02J_aqp5yaQ39-IMHqRjY=w300"></li> 
 
    <li><img src="https://pbs.twimg.com/profile_images/875822477225734146/6I5lQUof_400x400.jpg"></li> 
 
    <li><img src="http://study.com/cimages/multimages/16/solid_shape_dice.jpg"></li> 
 
    <li><img src="https://lh3.googleusercontent.com/kIy-fJ9XgrZlOeMRUY5lJslDDhTCxddxh9Vwpitm-vOaFkYgLW0yFGcpgfWYatFwrVE=w300"></li> 
 
    <li><img src="https://www.jaapsch.net/puzzles/images/square1.jpg"></li> 
 
    <li><img src="http://www.op-art.co.uk/op-art-gallery/var/albums/your-op-art/GDHarley_OP-ART_%2311.jpg?m=1382213140"></li> 
 
    </ul> 
 
</div>