Element looking weird with animation set two times - html

Question

So I got this pen: https://codepen.io/tobiasglaus/pen/NedpxQ
Whenever it "clicks", a circle should be animated. There are 2 clicks in the animation, so I just added the animation 2 times, like this:
animation: circle .3s forwards, circle .3s forwards;
animation-delay: 1.7s, 4.9s;
The problem is, that the circle isn't a circle anymore, but a blurry square:
But it should look like this:
I can't replicate the problem in a SO-snippet, but since I need to provide a minimal code example, here's the snippet of how it should look.
Note: When I view the animation with the Chrome DevTools, the animation looks correct.
.circle:after{
content:"";
position:absolute;
top:20px;
left:20px;
width:50px;
height:50px;
border-radius:50%;
border:2px solid #222f3e;
animation:circle .3s forwards, circle .3s forwards;
animation-delay:0s, 1s;
opacity:0;
transform:scale(0);
}
#keyframes circle {
0%{
transform:scale(0);
}
50%{
opacity:1;
}
100%{
transform:scale(1);
opacity:0;
}
}
<div class="circle"></div>

Answer 1

You can make use of the animation-iteration-count property, like so:
animation: circle .3s forwards;
animation-iteration-count: 2;
Animation-iteration-count sets the number of times an animation cycle should be played before stopping. You want the click to happen twice, so we set the value to 2.

Answer 2

I still don't know why the circle rendered weirdly, but I managed to come up with a solution that works:
That's what I had:
animation: circle .3s forwards, circle .3s forwards;
animation-delay: 1.7s, 4.9s;
and the animation:
#keyframes circle {
0%{
transform:scale(0);
}
50%{
opacity:1;
}
100%{
transform:scale(1);
opacity:0;
}
}
Instead of calling the animation twice, I created one big animation:
animation: circle 3.5s forwards;
animation-delay:1.7s;
and that's the animation:
#keyframes circle{
0%{
transform:scale(0);
}
4%{
opacity:1;
}
8%{
transform:scale(1);
opacity:0;
}
92%{
transform:scale(0);
opacity:0;
}
96%{
opacity:1;
}
100%{
transform:scale(1);
opacity:0;
}
}
So the initial animation duration of 0.3s is now equal to 8% and the animation delay between the animations is equal to the 74% of nothing in the animation.