CSS中的多个动画-仅重复秒动画

Question

我想并行运行两个动画，而第二个动画的延迟为1s。

下面的代码在初始迭代中运行得很好，但是，第一个动画dash01只执行一次，尽管我将其设置为无限运行。

#Vector_42 {
stroke-dasharray: 5;
animation-name: dash01, dash01Rev;
animation-duration: 5s, 5s;
animation-delay: 0s, 1s;
animation-iteration-count: infinite, infinite;
animation-timing-function: linear, linear;
animation-direction: forwards, forwards;
}
@keyframes dash01 {
0% { stroke: #0066cc; stroke-dashoffset: 5; }
10%, 100% { stroke-dashoffset: 15; }
}
@keyframes dash01Rev {
0% { stroke: #0066cc; stroke-dashoffset: -5; }
10%, 100% { stroke-dashoffset: -15; }
}

你知道我在这里做错了什么吗？

工作示例：https://jsfiddle.net/Azrion/hzrbfj34/1/

Answer 1

感谢@Temani Afif的建议：

只需在一个动画中完成所有操作。你需要计算或估计1秒的延迟量，并以这种方式实现：

@keyframes dash01{
0% { stroke: #0066cc; stroke-dashoffset: 5; } // Start going forward
10% { stroke-dashoffset: 15; } // Continue same way
10.1% { stroke-dashoffset: 15; } // Still continue
20% { stroke-dashoffset: 15; } // Still continue
20.1% { stroke-dashoffset: -5; } // Set reverse way
30% { stroke-dashoffset: -15; } // Go reverse now
100% { stroke-dashoffset: -15; } // Keep going reverse :D
}