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

Question

我想运行两个动画并行，而第二个动画有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/

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
}

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

Multiple animations in CSS - Only repeats the seconds animation

css

svg

css-transitions