イメージ・スライダは - ループ

Question

を働いていない私は、この画像のスライダーを使用したい：http://codepen.io/rslglover/pen/DBvoA

画像スライダーはうまく動作しますが、ときに仕上げ、それが停止します。私は違いがCodePenのコードとは何か、そして私が何をしたのか分かりません。 CodePenリンクではどのように動作しますか？

article{ 
position: absolute; 
left: 450px; 
background: #292929; 
color: #e3e3e3; 
width: 450px; 
height: 450px; 
text-align: center; 
font: 2em/1em sans-serif; 
border-box: box-sizing; 
padding-top: 0px; 
} 

article:nth-of-type(1){ 
animation: slideIn 50s linear 0s infinite; 
} 
article:nth-of-type(2){ 
animation: slideIn 50s linear 5s infinite; 
} 
article:nth-of-type(3){ 
animation: slideIn 50s linear 10s infinite; 
} 
article:nth-of-type(4){ 
animation: slideIn 50s linear 15s infinite; 
} 
article:nth-of-type(5){ 
animation: slideIn 50s linear 20s infinite; 
} 
article:nth-of-type(6){ 
animation: slideIn 50s linear 25s infinite; 
} 
article:nth-of-type(7){ 
animation: slideIn 50s linear 30s infinite; 
} 
article:nth-of-type(8){ 
animation: slideIn 50s linear 35s infinite; 
} 
article:nth-of-type(9){ 
animation: slideIn 50s linear 40s infinite; 
} 
article:nth-of-type(10){ 
animation: slideIn 50s linear 45s infinite; 
} 

@keyframes slideIn{ 
0% {left: 450px;} 
1% {left: 0;} 
10% {left: 0;} 
11% {left: -450px;} 
100%{left: -450px;} 
} 

.galleryImg { 
height: 450px; 
width: 450px; 
} 

.gallery { 
width: 450px; 
height: 450px; 
position: absolute; 
left: 50%; 
top: 50%; 
margin-left: -225px; 
margin-top: -225px; 
overflow: hidden; 
background: rgba(0,0,0,0.3); 
border: 1px solid #fff; 
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7); 
} 

そして、私のhtml

<div class="galleryInfo"> 
    <div class="gallery"> 
<article><img class="galleryImg" src="images/aa2.png" alt=""></article> 
<article> <img class="galleryImg" src="images/aa1.png" alt=""></article> 
<article><img class="galleryImg" src="images/bb1.png" alt=""></article> 
<article><img class="galleryImg" src="images/bb2.png" alt=""></article> 
</div> 
</div> 

Answer 1

チェックこのアウト：
HTML：

<div class="galleryInfo"> 
    <div class="gallery"> 
<section> 
    <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article> 
    <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article> 
    <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article> 
    <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article> 
</section> 
     </div> 
</div> 

はCSS：

html{ 
    background: #aaa; 
} 

section{ 
    width: 200px; 
    height: 200px; 
    position: relative; 
    left: 50%; 
    top: 1em; 
    margin-left: -100px; 
    overflow: hidden; 
    background: #292929; 
    border: 10px solid #fff; 
} 

/*section:hover article{ 
    animation-play-state: paused; 
}*/ 

article{ 
    position: absolute; 
    left: 450px; 
    background: #292929; 
    color: #e3e3e3; 
    width: 450px; 
    height: 450px; 
    text-align: center; 
    font: 2em/1em sans-serif; 
    border-box: box-sizing; 
    padding-top: 0px; 
} 

.galleryImg { 
height: 450px; 
width: 450px; 
} 

.gallery { 
width: 450px; 
height: 450px; 
position: absolute; 
left: 50%; 
top: 50%; 
margin-left: -225px; 
margin-top: -225px; 
overflow: hidden; 
background: rgba(0,0,0,0.3); 
border: 1px solid #fff; 
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7); 
} 

article:nth-of-type(1){ 
    animation: slideIn 20s linear 0s infinite; 
} 
article:nth-of-type(2){ 
    animation: slideIn 20s linear 5s infinite; 
} 
article:nth-of-type(3){ 
    animation: slideIn 20s linear 10s infinite; 
} 
article:nth-of-type(4){ 
    animation: slideIn 20s linear 15s infinite; 
} 

@keyframes slideIn{ 
    0% {left: 200px;} 
    1% {left: 0;} 
    10% {left: 0;} 
    11% {left: -200px;} 
    100%{left: -200px;} 
} 

またはcssファイルclas galleryInfoとgallery上の位置をアニメーションの上に変更します。

Answer 2

アニメーションが停止している主な理由は、CSSが10個のスライド用に構成されているためです。

同じ継続時間とアニメーションを維持するには、使用している新しいスライドの合計数に対してキーフレームの割合を設定する必要があります。

@keyframes slideIn{ 
    0% {left: 200px;} /* Always 0% */ 
    2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */ 
    25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */ 
    27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */ 
    100%{left: -200px;} /* Always 100% */ 
} 

キーフレームを変更することで、コードサンプルのスライドスピードを維持します。

ここには作業スニペットがあります。

html{ 
 
    background: #aaa; 
 
} 
 

 
section{ 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    left: 50%; 
 
    top: 1em; 
 
    margin-left: -100px; 
 
    overflow: hidden; 
 
    background: #292929; 
 
    border: 10px solid #fff; 
 
} 
 

 
/*section:hover article{ 
 
    animation-play-state: paused; 
 
}*/ 
 

 
article{ 
 
    position: absolute; 
 
    left: 200px; 
 
    background: #292929; 
 
    color: #e3e3e3; 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    font: 2em/1em sans-serif; 
 
    border-box: box-sizing; 
 
    padding-top: 80px; 
 
} 
 

 
/* 
 
* As each slide's animation is 5s, the set duration is totalSlides * 5. 
 
*/ 
 
article:nth-of-type(1){ 
 
    animation: slideIn 20s linear 0s infinite; 
 
} 
 
article:nth-of-type(2){ 
 
    animation: slideIn 20s linear 5s infinite; 
 
} 
 
article:nth-of-type(3){ 
 
    animation: slideIn 20s linear 10s infinite; 
 
} 
 
article:nth-of-type(4){ 
 
    animation: slideIn 20s linear 15s infinite; 
 
} 
 

 
@keyframes slideIn{ 
 
    0% {left: 200px;} /* Always 0% */ 
 
    2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */ 
 
    25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */ 
 
    27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */ 
 
    100%{left: -200px;} /* Always 100% */ 
 
}

<section> 
 
    <article>Slide 1</article> 
 
    <article>Slide 2</article> 
 
    <article>Slide 3</article> 
 
    <article>Slide 4</article> 
 
</section>