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

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

LMAO you problem is my solution XD, well kind of I want something to fade in and then stay on screen while looping animation 2, but I imagine it should be able to the same. Thanks :) — GibsonFX
– GibsonFX, Commented May 5, 2019 at 6:13

user3942918 · Accepted Answer · 2014-08-19 13:58:43Z

20

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

answered Aug 19, 2014 at 13:58

user3942918

26.5k13 gold badges57 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hitautodestruct Over a year ago

Great! Why doesn't it work as expected with multiple animations?

hitautodestruct Over a year ago

This does not really answer the question but as long as no one else comes along with a better css only answer I'll accept yours. Thanks!

Gavin Markee · Accepted Answer · 2014-08-19 13:48:57Z

1

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.

answered Aug 19, 2014 at 13:48

Gavin Markee

395 bronze badges

2 Comments

hitautodestruct Over a year ago

I should have pointed out that I did not want to use javascript for this one. Thanks.

Gavin Markee Over a year ago

Ah, okay. Well, I'm pretty sure it's not possible, but we'll see if someone else can come up with something.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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>

Collectives™ on Stack Overflow

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

The Issue

The Question

The Example

3 Answers 3

2 Comments

2 Comments

Possible Solution:

Code:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

The Issue

The Question

The Example

3 Answers 3

2 Comments

2 Comments

Possible Solution:

Code:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related