CSS: multiple images blinking effect, one after another

Question

I am trying to make 3 images alternate blinking/flashing at the same spot, on top of 1 background image. I tried doing that but the blinking turned out to be really random: 2 images would blink together while the other blinks alone.

My goal is to have each image appear/blink/flash (0.5s) one at a time.

• the first image should appear first
• the second image should appear after the first image 'disappears'
• the first image should appear after last image appears(which is when the second image disappears).

I want this effect to loop infinitely.

#bsofa{
  position: absolute;
  width: 220px;
  height: 220px;
  top: 713.916px;
  left: 421px;
}
#bsofa1 {
  animation-name: blink;
  animation: blink 1s infinite;
  animation-delay: 0s;
  animation-direction: alternate;
  position: absolute;
  width: 171px;
  height: 128.384px;
  
}
@keyframes blink {
  0% {
       opacity: 1;
   }
   24% {
        opacity: 1;
    }
    25% {
         opacity: 0;
     }
   49% {
       opacity: 0;
   }
   50% {
       opacity: 0;
   }
   100% {
       opacity: 0;
   }
}
#bsofa2 {
  animation-name: blink2;
  animation: blink 1s infinite;
  animation-delay: 0s;
  animation-direction: alternate;
  position: absolute;
  width: 199;
  height: 199px;

}
@keyframes blink2{
  0% {
       opacity: 0;
   }
   24% {
        opacity: 0;
    }
    25% {
         opacity: 1;
     }
   49% {
       opacity: 1;
   }
   50% {
       opacity: 0;
   }
   100% {
       opacity: 0;
   }
}

#bsofa3 {
  animation-name: blink3;
  animation: blink 1s infinite;
  animation-delay: 0s;
  animation-direction: alternate;
  position: absolute;
  width: 183.04px;
  height: 136.987px;
   
}
@keyframes blink3 {
  0% {
       opacity: 0;
   }
   24% {
        opacity: 0;
    }
    25% {
         opacity: 0;
     }
   49% {
       opacity: 0;
   }
   50% {
       opacity: 1;
   }
   100% {
       opacity: 1;
   }
}

<div class="bsofa">
<img id="bsofa" src="images/1d-bsofa.jpg">
<img id="bsofa1" src="images/1d-bsofa1.png">
<img id="bsofa2" src="images/1d-bsofa2.png">
<img id="bsofa3" src="images/1d-bsofa3.png">
</div>

Answer 1

I think you could pull this off with some Javascript:

First, give each image you'd like to "blink" a common class, e.g:

<img id="bsofa1" class="blinkable" src="images/1d-bsofa1.png">
<img id="bsofa2" class="blinkable" src="images/1d-bsofa2.png">
<img id="bsofa3" class="blinkable" src="images/1d-bsofa3.png">

In your CSS, set display: none for .blinkable. Next, grab all the elements with class "blinkable":

var imgs = document.getElementsByClassName("blinkable")

Iterate through the collection:

for (var x = 0; x < imgs.length; x++) {
    var img = imgs[x]
    var nextImg = (x < 2) ? imgs[x + 1]:imgs[0]
    var delay = setTimeout(500, function() {
        img.style.display = none;
        nextImg.style.display = "block";
    })

    //hijack the loop and set to beginning when at end
    if (x == 2) {
        x = 0
    }
}