动画延迟属性在循环中不起作用

Question

我想制作一个动画，其中每个路径一个接一个地显示，一遍又一遍地显示。(循环)

我使用了这两个属性:"animation-delay: 1 s;"one_answers"animation-iteration-count:无限;">

: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>

但是命令"animation-delay: 1s;"只在第一次运行时显示，之后不使用。

你可以在这里找到我的代码:https://codepen.io/bastidesign/pen/eYyxZao

必须像这样:gif animation Octagon

你能帮我吗?

Answer 1

animation-delay属性只延迟动画的开始，但在动画开始后，它会持续运行。你想要的是在迭代之间有一个延迟，这是可行的，但不使用animation-delay，这不是一个简单的事情。

这是一个可以完成工作的解决方案:CSS关键帧动画与迭代之间的延迟