Looping a fade in animation - css

Question

Im trying to animate the gold blocks in the JSFiddle.
All gold blocks should be invisible, then the first one fades in, followed by the second, then the third fourth and fifth, giving a tower of gold blocks.
#keyframes twinkle {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
100% {
opacity: 1;
}
}
It works fine for the first round of the animation. But when it loops all gold blocks are on.
Any ideas where I am going wrong?

Answer 1

You werent resetting your loop before it queued again. here is a working fiddle with the css changes below.
#keyframes twinkle {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
}
edit 1:
So I had to modify a few things within the fiddle. First there is now a small bit of JS so it resets.
setInterval(function (){
window.elm = document.getElementById('main-block'),
window.newone = elm.cloneNode(true);
elm.parentNode.replaceChild(window.newone, window.elm);
}, 5000);
Here is the modified HTMl markup.
<div id="main-block">
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
<div class="block four"></div>
<div class="block five"></div>
</div>
And the final CSS
.block{
background: gold;
margin: 1rem;
width: 30px;
height: 30px;
opacity: 0;
}
#keyframes twinkle {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.one{
animation: twinkle 5s ease-in-out infinite;
}
.two{
animation: twinkle 5s 1s ease-in-out infinite;
}
.three{
animation: twinkle 5s 2s ease-in-out infinite;
}
.four{
animation: twinkle 5s 3s ease-in-out infinite;
}
.five{
animation: twinkle 5s 4s ease-in-out infinite;
}
https://jsfiddle.net/kx7bf19g/4/

Answer 2

You must reset the opacity to 0.
Try this, played around with key frames :)
5 different keyframes were created
Just adjust them a little bit.
https://jsfiddle.net/y7q1jj7g/2/ - working fiddle
This is the first keyframe:
#keyframes twinkle {
9% { opacity: 0; }
10% { opacity: 1; }
20% { opacity: 1; }
99% { opacity: 1; }
100% { opacity: 0; }
}

Answer 3

According to mozilla the delay is only applied initially, when the animation is applied. This is done on page load by the browser, applying the css. Thus, the initial delay is not loopable.
There is a scripted solution that toggles a class in order to start and stop the animation using a toggle.
Here's a fiddle demonstrating the principle.
However, removing and adding a CSS class in two consecutive statements does not work - it gets optimized away by a rendering path. I've tried setTimeout and requestAnimationFrame but to no avail.