CSS3 动画不同步答案

【问题标题】：CSS3 animation out of syncCSS3 动画不同步
【发布时间】：2020-03-26 20:36:36
【问题描述】：

我有这个关键帧动画，它应该在 50% 标记处更改 div 的颜色，然后在 2 秒延迟后，它应该为另一个 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>

【问题讨论】：

标签： css svg css-animations

【解决方案1】：

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

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

在这里，您预计每个元素之间的动画延迟为 2 秒，因此动画的总持续时间应为 8 秒。此外，每个元素的持续时间应在 2 秒内完成（即 8 秒的 25%）。因此，您的动画代码应如下面的 sn-p 所示。（有问题的 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>

【讨论】：

非常感谢...您提供的 CSS 在跨浏览器兼容性方面如何？有webkit支持，但是firefox和ie呢？
@Boris：它应该适用于最新的 Firefox、IE 10 和 IE 11，因为它们不需要任何浏览器特定的前缀。对于较低版本的 Firefox，您需要复制所有规则并包括 -moz- 前缀（无论您在哪里看到 -webkit-）。对于 Safari，Opera 不需要额外的更改，因为它们也使用 Webkit。 IE9 及更低版本不支持 CSS 动画。

【解决方案2】：

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;
}

【讨论】：