CSS3 动画不同步

Question

我有这个关键帧动画，它应该在 50% 标记处更改 div 的颜色，然后在 2 秒延迟后，它应该为另一个 div 设置动画。在那之后还有一个。就这样循环。

但它并没有像它应该的那样工作。而不是div运行一个接一个，他们运行同时

我该如何解决这个问题？

div#wifi-waves svg path#w01 {
    -webkit-animation: colorchnage 1s infinite;
    animation: colorchnage 1s infinite;
}

div#wifi-waves svg path#w02 {
    -webkit-animation: colorchnage 1s infinite;
    animation: colorchnage 1s infinite;

    -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}

div#wifi-waves svg path#w03 {
    -webkit-animation: colorchnage 1s infinite;
    animation: colorchnage 1s infinite;

    -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}

div#wifi-waves svg path#w04 {
    -webkit-animation: colorchnage 1s infinite;
    animation: colorchnage 1s infinite;

    -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}

@-webkit-keyframes colorchnage {
    0%   { fill: #ecf0f1; }
    50%  { fill: rgba(26, 60, 88, 0.9); }
    100% { fill: #ecf0f1; }
}

@keyframes colorchnage {
    0%   { fill: #ecf0f1; }
    50%  { fill: rgba(26, 60, 88, 0.9); }
    100% { fill: #ecf0f1; }
}

SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 45" xml:space="preserve" preserveAspectRatio="xMixYMid">

    <path id="w04" d=""></path>

    <path id="w03" d=""></path> 

    <path id="w02" d=""></path>

    <path id="w01" d=""></path>

</svg>

Answer 1

CSS 不会从上到下读取属性，每个动画延迟 2 秒。你必须给每一波延迟，像这样：

div#wifi-waves svg path{
    animation: colorchnage 1s infinite;
}

div#wifi-waves svg path#w02{
    animation-delay: 2s;
}

div#wifi-waves svg path#w03{
    animation-delay: 4s;
}

div#wifi-waves svg path#w04{
    animation-delay: 6s;
}

Answer 2

因为您希望让每个项目一个接一个地动画化，您应该确保第一个项目的动画在第二个项目开始之前完成。实际上，您在每个元素上添加的延迟是动画可以在前一个元素上运行的时间量。

此外，之前设置动画的元素应该在其余时间保持空闲（当其他元素上的动画正在发生时），以使其看起来像是在以迭代方式发生。因此，您的总动画持续时间实际上应该等于 [每个元素的延迟 * 元素数量]。

这里你期望每个元素之间有 2 秒的延迟，因此动画的总持续时间应该是 8 秒。另外，每个元素的持续时间应在 2 秒内完成（即 8 秒的 25%）。因此，您的动画代码应类似于以下代码段。（有问题的 SVG 不工作，所以我从网上复制了一些东西）。

div#wifi-waves svg path#w01 {
  -webkit-animation: colorchnage 8s infinite;
  animation: colorchnage 8s infinite;
}
div#wifi-waves svg path#w02 {
  -webkit-animation: colorchnage 8s infinite;
  animation: colorchnage 8s infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
div#wifi-waves svg path#w03 {
  -webkit-animation: colorchnage 8s infinite;
  animation: colorchnage 8s infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
div#wifi-waves svg path#w04 {
  -webkit-animation: colorchnage 8s infinite;
  animation: colorchnage 8s infinite;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
@-webkit-keyframes colorchnage {
  0% {
    fill: #ecf0f1;
  }
  12.5% {
    fill: rgba(26, 60, 88, 0.9);
  }
  25% {
    fill: #ecf0f1;
  }
}
@keyframes colorchnage {
  0% {
    fill: #ecf0f1;
  }
  12.5% {
    fill: rgba(26, 60, 88, 0.9);
  }
  25% {
    fill: #ecf0f1;
  }

<div id="wifi-waves">
  <svg width="200px" height="260px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path id="w01" d="M10 80 Q 95 10 180 80" stroke="black" fill="#ecf0f1" />
    <path id="w02" d="M10 120 Q 95 40 180 120" stroke="black" fill="#ecf0f1" />
    <path id="w03" d="M10 160 Q 95 80 180 160" stroke="black" fill="#ecf0f1" />
    <path id="w04" d="M10 200 Q 95 120 180 200" stroke="black" fill="#ecf0f1" />
  </svg>
</div>

CSS3 动画不同步

CSS3 animation out of sync

css

svg

css-animations