css - 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/

标签： csssvgcss-transitions

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
}