SteveW SteveW - 1 month ago 8
CSS Question

CSS images animation looping

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
.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/