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

问题描述

我想同时运行两个动画，而第二个动画的延迟为1秒。

下面的代码可以在初始迭代中完美运行，但是，尽管我将其设置为无限运行，但第一个动画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/

解决方法

感谢@Temani Afif的建议：

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

develop

css-transitions svg