I have a total of four divs that I want to hover continuously, one after the other. Here is the code I am currently using:
#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;
}
}<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>To achieve this animation effect for the first section, I utilized the following 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;
}
}Now, I am looking for assistance on how to make the remaining elements animate in the same sequence, where each section animates and then stops before the next one begins. Any help or guidance on achieving this would be greatly appreciated. Thank you in advance.