hover animation one by one in html using css

I have four divs, which I am trying to hover one after the other continuously, my code is like below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#rij1 .content-overlayz,
#rij1 .content-details {
  animation-duration: 2s;
  animation-name: stepped-pulse;
  animation-iteration-count: infinite;
  /* animation-direction: alternate; */
  animation-timing-function: steps(4, end);
}

@keyframes stepped-pulse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

<!-- language: lang-html -->

<a href="<?php echo base_url()?>homecontroller/types/<?=$subz->id?>">
      <div class="ProductBlock" id="rij<?=$i?>">
        <div class="contentme">
        <div class="content-overlayz"></div>
          <div class="img-fill">
            <img src="<?php echo base_url()?>admin/uploads/types/<?=$subz->pimage?>">
          </div>
          <div class="content-details" style="z-index:99">
          <h3><?=$subz->name?></h3>
      </div>
        </div>
      </div> </a>

<!-- end snippet -->

i used the following css to make the first section animate:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#rij1 .content-overlayz,
#rij1 .content-details {
  animation-duration: 2s;
  animation-name: stepped-pulse;
  animation-iteration-count: infinite;
  /* animation-direction: alternate; */
  animation-timing-function: steps(4, end);
}

@keyframes stepped-pulse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

<!-- end snippet -->

how do i make rest of the elements animate like this one after the other , that is 1st section will animate then stop then next will animate and stop and next, please help, thanks in advance

Error: You are adding style to id which is being generated dynamically to the code and you might not be able to add the styling to all later on

Fix Add the styling either to ProductBlock class or to a new class if you are using it elsewhere.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
function playAnimation() {
let currentIndex = 0;
$(".ProductBlock").each(function(index) {
let element = $(this);
setTimeout(function() {
$(".ProductBlock").removeClass("animateThis");
element.addClass("animateThis");
currentIndex++;
if (currentIndex === $(".ProductBlock").length) {
setTimeout(function() {
currentIndex = 0;
playAnimation();
}, 2000);
}
}, index * 2000);
});
}
playAnimation();
});

<!-- language: lang-css -->

.animateThis .content-overlayz,
.animateThis .content-details {
animation-duration: 2s;
animation-name: stepped-pulse;
animation-iteration-count: infinite;
animation-timing-function: steps(4, end);
}
@keyframes stepped-pulse {
0% {
opacity: 0;
}
25% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="">
<div class="ProductBlock" id="rij1">
<div class="contentme">
<div class="content-overlayz"></div>
<div class="img-fill">
<img src="">
</div>
<div class="content-details" style="z-index:99">
<h3>
Name 1
</h3>
</div>
</div>
</div>
</a>
<a href="">
<div class="ProductBlock" id="rij2">
<div class="contentme">
<div class="content-overlayz"></div>
<div class="img-fill">
<img src="">
</div>
<div class="content-details" style="z-index:99">
<h3>
Name 2
</h3>
</div>
</div>
</div>
</a>
<a href="">
<div class="ProductBlock" id="rij3">
<div class="contentme">
<div class="content-overlayz"></div>
<div class="img-fill">
<img src="">
</div>
<div class="content-details" style="z-index:99">
<h3>
Name 3
</h3>
</div>
</div>
</div>
</a>
<a href="">
<div class="ProductBlock" id="rij4">
<div class="contentme">
<div class="content-overlayz"></div>
<div class="img-fill">
<img src="">
</div>
<div class="content-details" style="z-index:99">
<h3>
Name 4
</h3>
</div>
</div>
</div>
</a>

<!-- end snippet -->