Question

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

CSS不只是从上到下读取属性，而是将每个动画延迟到另一个。你必须给第一个动画延迟0，第二个2s，依此类推。

您的代码应如下所示：

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: 4s;
    animation-delay: 4s;
}

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

CSS3动画不同步

2 个答案: