CSS3フェーディングが間違っている

Question

JavaScriptを必要とせずにCSS3を使用してイメージギャラリーを作成しようとしています。 これは私の現在のソリューションです：

.slide { 
 
    position: absolute; 
 
} 
 
.slide:nth-child(1) { 
 
    -webkit-animation: fade 24s 18s infinite; 
 
    z-index: 10; 
 
} 
 
.slide:nth-child(2) { 
 
    -webkit-animation: fade 24s 12s infinite; 
 
    z-index: 10; 
 
} 
 
.slide:nth-child(3) { 
 
    -webkit-animation: fade 24s 6s infinite; 
 
    z-index: 10; 
 
} 
 
.slide:nth-child(4) { 
 
    -webkit-animation: fade 24s 0s infinite; 
 
    z-index: 10; 
 
} 
 
@-webkit-keyframes fade { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    23% { 
 
    opacity: 1; 
 
    } 
 
    25% { 
 
    opacity: 0; 
 
    } 
 
    98% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" /> 
 
<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" /> 
 
<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" /> 
 
<img src="http://www.yondaphotography.com/wp-content/uploads/2014/01/Nature-Photography-Techniques-For-Beginners.jpg" class="slide" alt="" />

CSSは、第4の画像だレンダリング時に私の問題は、それはそれはレンダリングの前に空白領域のショーは次の画像だし、これループの背中をレンダリングするときイメージは再び表示され、常に各イメージの間に空白の領域が表示されます。

この問題を解決するにはどうすればよいですか？誰かが解決策を提案できますか？

ありがとうございました。私はChromeでOPの問題を再現するために、マネージコードをいじるビットの後に実際に

Answer 1

。

問題は、アニメーション時間にわたりIMGの不透明度の悪い同期によって引き起こされます。不透明度が0になったときに画像が点滅し、下に画像が表示されません。

我々は個別に各画像の遷移を絞り込むことができるように、そのように、各画像のためのアニメーションの一連の、いずれかを定義している反復にわたって同期を維持するための直感的で分かりやすい解像度：

.slide { 
 
    position:absolute; 
 
} 
 

 
.slide:nth-child(1) { 
 
    -webkit-animation: fade0 24s infinite; 
 
    z-index:10; 
 
} 
 

 
.slide:nth-child(2) { 
 
    -webkit-animation: fade25 24s infinite; 
 
    z-index:10; 
 
} 
 

 
.slide:nth-child(3) { 
 
    -webkit-animation: fade50 24s infinite; 
 
    z-index:10; 
 
} 
 

 
.slide:nth-child(4) { 
 
    -webkit-animation: fade75 24s infinite; 
 
    z-index:10; 
 
} 
 

 
@-webkit-keyframes fade0 { 
 
    0% {opacity:0.95;} 
 
    2% {opacity:1;} 
 
    100% {opacity:1;} 
 
    } 
 
@-webkit-keyframes fade25 { 
 
    0% {opacity:0;} 
 
    25% {opacity:0;} 
 
    27% {opacity:1;} 
 
    100% {opacity:1;} 
 
    } 
 
@-webkit-keyframes fade50 { 
 
    0% {opacity:0;} 
 
    50% {opacity:0;} 
 
    52% {opacity:1;} 
 
    100% {opacity:1;} 
 
    } 
 
@-webkit-keyframes fade75 { 
 
    0% {opacity:0;} 
 
    75% {opacity:0;} 
 
    77% {opacity:1;} 
 
    100% {opacity:1;} 
 
    }

<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" /> 
 
<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" /> 
 
<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" /> 
 
<img src="http://www.yondaphotography.com/wp-content/uploads/2014/01/Nature-Photography-Techniques-For-Beginners.jpg" class="slide" alt="" />

Answer 2

技術的解決策は以下のとおりです。

1. なかれ笙最初の不透明度の画像：1;

2. 第2の画像が30から66パーセントから示し、なかれ、この範囲内でない場合は非表示になります。

3. 第三の画像は、64から96パーセントから表示と常に、この範囲内にない場合は非表示になります。

4. は**私はまた、スワップ第三の画像が最初の画像には、溶液は96から100パーセントから第三の画像を非表示にしたときのフェージング効果を持っていると思います。以下のコーディングを参照してください。

/*.item:nth-child(1){ 
 
     -webkit-animation: fade1 50s infinite; 
 
    }*/ 
 
    .item:nth-child(2){ 
 
     -webkit-animation: fade2 50s infinite; 
 
    } 
 
    .item:nth-child(3){ 
 
     -webkit-animation: fade3 50s infinite; 
 
    } 
 
    /*@-webkit-keyframes fade1 { 
 
     0% {opacity:0;} 
 
     2% {opacity:1;} 
 
     100% {opacity:1;} 
 
    }*/ 
 
    @-webkit-keyframes fade2 { 
 
     0% {opacity:0;} 
 
     30% {opacity:0;} 
 
     34% {opacity:1;} 
 
     65% {opacity:1;} 
 
     66% {opacity:0;} 
 
     100% {opacity:0;} 
 
    } 
 
    @-webkit-keyframes fade3 { 
 
     0% {opacity:0;} 
 
     60% {opacity:0;} 
 
     64% {opacity:1;} 
 
     96% {opacity:1;} 
 
     100% {opacity:0;} 
 
    }

<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" /> 
 

 
<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" /> 
 

 
<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" />