CSS-изображения анимации цикла

Question

Я хотел бы анимировать 2 изображения с помощью css, в результате чего 1 начинается и остается в течение 5 секунд, а другой следует за ними, и они оба остаются на 5 секунд вместе, и все это начинается снова в бесконечном цикле. Я делаю это один раз, но как только он проходит первый цикл, все они ожидают одновременно без второй задержки изображения. Пожалуйста, просмотрите мой код ниже:

CSS:

img.coke { 
position: relative; 

animation-name: FadeInOut; 
animation-duration: 10s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out; 
} 

img.fanta { 
position: relative; 
opacity:0; 
animation-name: FadeIn; 
animation-duration: 5s; 
animation-delay: 5s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out; 
} 

@keyframes FadeInOut { 
0% { 
opacity:0; 
} 

50% { 
opacity:1; 
} 

100% { 
opacity:1; 
} 
} 

@keyframes FadeIn { 
0% { 
opacity:0; 
} 

100% { 
    opacity:1; 
} 
} 

HTML:

<div id ="imgo"> 
<img class = "coke" src="http://media.wktv.com/images/AP_985452110986.png" /> 
<img class ="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" /> 
</div> 

Answer 1

.coke { 
    height: 100px; 
    opacity: 0; 
    -webkit-animation: example1 10s infinite; /* Safari 4+ */ 
    -moz-animation: example1 10s infinite; /* Fx 5+ */ 
    -o-animation:  example1 10s infinite; /* Opera 12+ */ 
    animation:   example1 10s infinite; /* IE 10+, Fx 29+ */ 
} 

.fanta { 
    height: 100px; 
    opacity: 0; 
    -webkit-animation: example2 10s infinite; /* Safari 4+ */ 
    -moz-animation: example2 10s infinite; /* Fx 5+ */ 
    -o-animation:  example2 10s infinite; /* Opera 12+ */ 
    animation:   example2 10s infinite; /* IE 10+, Fx 29+ */ 
} 


/* Safari 4.0 - 8.0 */ 
@-webkit-keyframes example1 { 
    10% {opacity: 0;} 
    15% {opacity: 1;} 
    100% {opacity: 1;} 
} 

/* Standard syntax */ 
@keyframes example1 { 
    10% {opacity: 0;} 
    15% {opacity: 1;} 
    100% {opacity: 1;} 
} 

/* Safari 4.0 - 8.0 */ 
@-webkit-keyframes example2 { 
    45% {opacity: 0;} 
    50% {opacity: 1;} 
    100% {opacity: 1;} 
} 

/* Standard syntax */ 
@keyframes example2 { 
    45% {opacity: 0;} 
    50% {opacity: 1;} 
    100% {opacity: 1;} 
} 

пытаются манипулировать анимации проценты

Пример: https://jsfiddle.net/o4226gmd/

Answer 2

Как вы отметили animation-delay просто работает унции, чтобы оттянуть время анимации старты:

Указывает, когда должна запускаться анимация. Это позволяет последовательности анимации начинаться через некоторое время после ее применения к элементу.

Но вы можете использовать логику вы уже контролируя состояние непрозрачности на основе % анимации:

img { 
 
    max-height: 200px; 
 
} 
 
img.coke { 
 
    position: relative; 
 
    animation: FadeInOut 2s infinite alternate ease-in-out; 
 
} 
 
img.fanta { 
 
    position: relative; 
 
    opacity: 0; 
 
    animation: FadeIn 2s infinite alternate ease-in-out; 
 
} 
 
@keyframes FadeInOut { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes FadeIn { 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div id="imgo"> 
 
    <img class="coke" src="http://media.wktv.com/images/AP_985452110986.png" /> 
 
    <img class="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" /> 
 
</div>