How do I loop a css animation with multiple keyframe definitions? - css

Question

The Issue
I have two css keyframe animations which I am running on a single element:
.fade-bg {
animation-name: fade-bg-1, fade-bg-2;
animation-delay: 0, 6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
The animations are defined as such:
#keyframes fade-bg-1 {
from {
opacity: 0;
background-image: url(image-1.jpg);
}
50% {
opacity: 1;
background-image: url(image-1.jpg);
}
to {
opacity: 0;
background-image: url(image-1.jpg);
}
}
#keyframes fade-bg-2 { /* Same as fade-bg-1 only with image-2.jpg */ }
The above works but when it gets to the second animation, it keeps repeating only that animation and does not loop back to fade-bg-1.
I've tried many different combinations of animation-direction but to no avail.
The Question
How do I make it so that the animation returns to fade-bg-1 and repeats itself?
The Example
EXAMPLE

Answer 1

Without javascript I don't think you can. However you can achieve the same effect using a single keyframe animation.
.fade-bg {
animation-name: fade-bg;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
#keyframes fade-bg {
0% {
opacity: 0;
background-image: url('image-1.jpg');
}
25% {
opacity: 1;
background-image: url('image-1.jpg');
}
50% {
opacity: 0;
background-image: url('image-1.jpg');
}
51% {
opacity: 0;
background-image: url('image-2.jpg');
}
75% {
opacity: 1;
background-image: url('image-2.jpg');
}
100% {
opacity: 0;
background-image: url('image-2.jpg');
}
}
EXAMPLE

Answer 2

I'm not sure this is possible with just css, but if you set up a setInterval method in JS cleverly, you could probably simulate the same thing by splitting the class into two.
var index = 1;
function switchBackground() {
if (index == 1) {
//this switches to the first background
var div = document.getElementById("yourDiv");
div.className = "fade-bg-1";
index = 0;
}
else {
//this switches to the second background
var div = document.getElementById("yourDiv");
div.className = "fade-bg-2";
index = 1;
}
}
setInterval(switchBackground(), 6000);
With .fade-bg-1 and .fade-bg-2 being the two animation classes.
Here's a jsfiddle if you want to play with it.

Answer 3

I asked this question almost 6 years ago, much has changed but no real solution with pure css.
The closest I could come up with was using a pseudo element to apply the second animation to.
Possible Solution:
Use a pseudo element like ::after and apply the second animation to it.
Code:
.animation--fade-bg, .animation--fade-bg::after {
width: 500px;
height: 500px;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
animation-iteration-count: infinite;
animation-duration: 3s;
}
.animation--fade-bg::after {
content: "";
display: block;
animation-direction: reverse;
}
.animation--fade-bg-1 {
animation-name: fade-bg-1;
}
.animation--fade-bg::after {
animation-name: fade-bg-2;
}
#keyframes fade-bg-1 {
from {
opacity: 0;
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
50% {
opacity: 1;
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
to {
opacity: 0;
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
}
#keyframes fade-bg-2 {
from {
opacity: 0;
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
50% {
opacity: 1;
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
to {
opacity: 0;
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
}
<div class="animation--fade-bg animation--fade-bg-1"></div>