平滑的CSS動畫與四個圖像

我有三個圖像，我想動畫，我想他們無限循環從1->2->3->2，每個過渡是一個ease-in-out。我已經這樣做了，但是當動畫重新開始循環時，即從2->1開始，這是突然的，而不是像我希望的那樣放鬆。平滑的CSS動畫與四個圖像

我懷疑動畫不是從淡入開始的，這怎麼解決？

#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代碼：我用的是animation-delay屬性錯開第三幀，但隨後的第一和第三幀沒有在緩和

來源

2017-01-24 Morgoth

這是因爲。 cfFadeInFirst開始在透明度1 ...它需要在0開始：

#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>

來源

2017-01-24 19:08:24 Ruskin

傻了我，我複製粘貼的代碼。在我看來，就是這樣，因此我看不到錯誤。謝謝：） – Morgoth

平滑的CSS動畫與四個圖像

回答

相關問題