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

【问题标题】：Multiple animations in CSS - Only repeats the seconds animationCSS中的多个动画 - 仅重复秒动画
【发布时间】：2020-08-19 06:26:04
【问题描述】：

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

【问题讨论】：

删除所有这些前缀会更容易为您提供帮助。如果您必须支持旧浏览器，您可以稍后添加它们，但为简单起见，我会为问题删除它们
两者都在为相同的属性设置动画，因此一次只能运行一个
@Dominik 我现在让它更具可读性:) 抱歉
因为有延迟，第一次只有一个在运行，然后另一个延迟1s后开始，然后领先（另一个什么都不做）
我认为你需要找到一种只写一个动画的方法。在该动画中，您可以有一个空槽（这将是您的延迟），然后是您想要的状态并重复它。

标签： css svg css-transitions

【解决方案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
}

【讨论】：