4つの画像で滑らかなCSSアニメーション

Question

私はアニメーションをしたい3つの画像を持っています。1->2->3->2から無限にループして、それぞれのトランジションはease-in-outです。私はこれを行いましたが、アニメーションがループを再開すると、つまり2->1から、それは突然です。

アニメーションがフェードインしていないと思われますが、どうしたら修正できますか？

#cf { 
 
    position: relative; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 0 auto; 
 
} 
 
#cf img { 
 
    position: absolute; 
 
    left: 0; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -o-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
@keyframes cfFadeInOutFirst { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    45% { 
 
    opacity: 0; 
 
    } 
 
    55% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@keyframes cfFadeInOutThird { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    45% { 
 
    opacity: 0; 
 
    } 
 
    55% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
#cf img.cf-first { 
 
    animation-name: cfFadeInOutFirst; 
 
    animation-timing-function: ease-in-out; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 10s; 
 
} 
 
#cf img.cf-third { 
 
    animation-name: cfFadeInOutThird; 
 
    animation-timing-function: ease-in-out; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 10s; 
 
}

<div id="cf"> 
 
    <img src="https://placehold.it/250/ff0000/000000" /> 
 
    <img class="cf-third" src="https://placehold.it/250/00FF00/000000" /> 
 
    <img class="cf-first" src="https://placehold.it/250/0000FF/000000" /> 
 
</div>

CSSコードを減らすために：私は、第3のフレームをずらすanimation-delayプロパティを使用していたが、その後第一及び第三のフレームに緩和されなかったが

Answer 1

なぜならそれが0で開始する必要がある不透明度1でcfFadeInFirst開始...：

#cf { 
 
    position: relative; 
 
} 
 
#cf img { 
 
    position: absolute; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
@keyframes cfFadeInOutFirst { 
 
    0% {opacity: 0;} 
 
    10% {opacity: 1;} 
 
    100% {opacity: 0;} 
 
} 
 
@keyframes cfFadeInOutThird { 
 
    0% {opacity: 0;} 
 
    55% {opacity: 1;} 
 
    100% {opacity: 0;} 
 
} 
 
img.cf-first { 
 
    animation: 10s ease-in-out 0s cfFadeInOutFirst infinite; 
 
} 
 
img.cf-third { 
 
    animation: 10s ease-in-out 0s cfFadeInOutThird infinite; 
 
}

<img src="https://placehold.it/100/ff0000/000000" /> 
 
<img src="https://placehold.it/100/00FF00/000000" class="cf-third" /> 
 
<img src="https://placehold.it/100/0000FF/000000" class="cf-first" /> 
 

 
<div id="cf"> 
 
    <img src="https://placehold.it/100/ff0000/000000" /> 
 
    <img src="https://placehold.it/100/00FF00/000000" class="cf-third" /> 
 
    <img src="https://placehold.it/100/0000FF/000000" class="cf-first" /> 
 
</div>