Is there a way to display 3 divs consecutively using only CSS3 in a loop?
The sequence should be: first div without delay, followed by the second div, and then the third:
This is my attempt so far:
.text1 {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}
@keyframes slidein {
0% { opacity: 0; }
25%,75% { opacity: 100%; }
100% { opacity: 100%;}
}
.animate-delay-3 { animation-delay: 3s;}
.animate-delay-6 { animation-delay: 6s;}<div id="container">
<a href="#">
<div id="header" class="header"></div>
<div class="layer text1">
<img src="div1.png" alt="">
</div>
<div class="layer text1 animate-delay-3">
<img src="div2.png" alt="">
</div>
<div class="layer text1 animate-delay-6">
<img src="div3.png" alt="">
</div>
</a>
</div>