Animation-delay property isn't working in loop - css

Question

I want to make an animation where each path is displayed one after the other and that over and over again. (Loop)
I have used these 2 Properties:
"animation-delay: 1s;"
and
"animation-iteration-count: infinite;"
:root{
--pink: #e6187e;
--green-100: green;
--white: white;
}
body{
background-color: #1f2937;
}
#keyframes fadeInOut {
0% {opacity: 0;}
100% {opacity: 1;}
}
.octagon.animate{
.octagon_outline1,
.octagon_outline2,
.octagon_outline3{
animation-name: fadeInOut;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-direction: reverse;
animation-fill-mode: forwards;
}
.octagon_outline1{animation-duration: 1s; animation-delay: 1s;}
.octagon_outline2{animation-duration: 1s; animation-delay: 2s;}
.octagon_outline3{animation-duration: 1s; animation-delay: 3s;}
}
<svg xmlns="http://www.w3.org/2000/svg" class="octagon animate" viewBox="0 0 500 480">
<path d="m189.06 102.25 120.95-.04 84.83 80.68v114.99l-84.81 80.56H189.05l-84.89-80.55V182.8l84.9-80.55z" class="octagon_center"/>
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="23" d="M179.31 79.05 319.7 79l98.46 94.25v134.31l-98.43 94.12H179.3l-98.53-94.1V173.14l98.54-94.09z" class="octagon_outline octagon_outline1"/>
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="23" d="m165.22 46.51 169.27-.06L453.2 160.33v162.29L334.52 436.34H165.21l-118.8-113.7V160.2L165.22 46.51z" class="octagon_outline octagon_outline2"/>
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="23" d="m150.71 11.57 198.33-.07 139.08 134.29v191.37l-139.05 134.1H150.69L11.5 337.18V145.63L150.71 11.57z" class="octagon_outline octagon_outline3"/>
</svg>
But the command "animation-delay: 1s;" is only shown in the first run and is not used after that.
You can find my code here:
https://codepen.io/bastidesign/pen/eYyxZao
It have to look like this: gif animation Octagon
Could you help me out?

Answer 1

The animation-delay property delays the start of the animation only, but after it’s started it runs continuously. What you want is to have a delay between iterations, which is doable but not using animation-delay, it's not a straightforward thing.
Here's a solution that could get the job done: CSS Keyframe Animation with Delay Between Iterations