CSS images animation looping - html

Question

I'd like to animate 2 images with css whereby 1 starts and stays for 5 secs and the other follows and they both stay for 5 more seconds together and it all starts again in an infinite loop. I'm doing it once but once it goes through the first loop, they all animate at the same time without the second images delay. Please view my code below:
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

As you have noted the animation-delay just works onces to delay the time the animation starts:
Specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.
But you can use the logic you already have controlling the opacity state based on the % of the animation:
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>

Answer 2

.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;}
}
Try to manipulate animation percentages
Example: https://jsfiddle.net/o4226gmd/