html - 如何控制CSS3动画的时序

Question

我正在制作 SVG 线条图动画，如下所示。

所以我正在做的是使用 stroke-dasharray 为耳朵设置动画，然后继续画圆点。

我好不容易画完了耳朵，但是我不知道怎么控制点的时间。以下是我的动画步骤:

1. 5秒内画耳动画
2. 5 秒后，继续点动画(逐行动画)
3. 当圆点动画完成后，循环回到第一步

这是我的代码，但它逐渐闪烁。如何调整时间？

.firstpath {
  stroke-dasharray: 1500;
  animation: firstanimate 5s linear forwards infinite;
}
@keyframes firstanimate {
  from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.secondpath {
  stroke-dasharray: 500;
  animation: secondanimate 5s linear forwards infinite;
}
@keyframes secondanimate {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.thirdpath {
  stroke-dasharray: 500;
  animation: thirdanimate 5s linear forwards infinite;
}
@keyframes thirdanimate {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.row1col1 {
  animation-delay: 1s;
  animation: blink 2s step-start 0s infinite;
  -webkit-animation: blink 2s step-start 0s infinite;
}
@keyframes blink {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">

  <g>
    <path class="firstpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M253.441,284.167c0,0-0.883-14.535,15.429-18.551c5.364-1.32,15.943-0.665,21.667,6.79c13.859,18.051-3.235,32.286-8.087,37.262
			c-4.853,4.979-7.713,21.027-17.543,20.528c-9.829-0.497-12.69-6.717-12.317-11.818" />

    <path class="secondpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M285.249,285.252c0,0,0.654-8.212-8.864-10.544c-9.519-2.334-16.796,8.211-10.825,17.449c2.613-1.12,5.226,0.652,5.599,2.52
			c0.373,1.866-1.213,4.199-3.826,4.199" />

    <path class="thirdpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M257.815,307.553c0,0-3.732,5.879,2.333,8.118c6.065,2.241,5.318-8.118,8.865-9.237c3.545-1.119,11.943-2.519,11.943-10.265
			c0-7.744-6.398-16.451-17.522-11.958" />
  </g>

  <line class="row1col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="287.987" x2="324.156" y2="286.627" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="285.335" x2="332.744" y2="284.167" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="338.25" y1="301.171" x2="343.41" y2="301.171" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="301.171" x2="333.75" y2="301.171" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="301.171" x2="324.156" y2="301.171" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="313.741" y1="314.625" x2="319.41" y2="315.987" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="323.741" y1="316.746" x2="329.667" y2="318.142" />

</svg>

Answer 1

形状各部分的形成方式，这将需要多个关键帧动画才能按照您预期的方式工作。

以下是您必须做的:

• 耳朵动画虽然预计在 5s 标记完成，但在线条动画完成之前不应开始其下一次迭代。也就是说，耳朵应该在线条完成动画所用的时间内保持空闲状态。因此，我们必须为耳朵设置 animation-duration，使其涵盖线条完成动画所需的时间。在这里，每个线条组件占用 1s，因此所有元素(耳朵和线条)的总 animation-duration 将为 12s。
• 耳朵动画应该在 5s 标记处完成(总持续时间为 12s)，因此 from - to 关键帧设置应替换为百分比。耳朵动画应从 0% 开始，并在 41% 完成(大约是 5s 标记)。从那里开始，它应该保持其位置直到 100%(12s)标记(基本上是直到线条完成它们的动画)。
• 每一行组件都应在其前一部分完成动画后开始，因此 row1col1 应从 41% 开始，也就是耳朵完全可见时(直到点它应该保持不可见)。
• row1col1 需要 1s 来制作动画(大约是 12s 的 8%)因此 row1col2 应该等到总持续时间的 49% 开始其动画。同样，row2col1 应该从 57% 开始，row2col2 应该从 66% 开始，依此类推。
• 如果线条需要慢慢淡入，则从 opacity: 0 at 41% 开始，并在 opacity: 1 49%(对于 row1col1 等等)。另一方面，如果您需要它们立即出现，请降低它获得 opacity: 1 的百分比。在代码片段中，我已经使 row1col1 在 42% 本身达到了 opacity: 1(就像 0.12s).

注意事项:

• 我还修改了耳朵组件的 stroke-dasharray 设置，以避免耳朵动画完成和线条动画开始之间最初存在的延迟。
• 我还建议您寻求一些 SVG 专家的帮助，以检查是否没有。零件的数量可以最小化，因为它会减少 no。所需的关键帧等。不幸的是，我的 SVG 知识有限，所以我帮不上什么忙。

.firstpath {
  stroke-dasharray: 150;
  animation: firstanimate 12s linear forwards infinite;
}
@keyframes firstanimate {
  0% {
    stroke-dashoffset: 150;
  }
  41% {
    stroke-dashoffset: 0;
  }
}
.secondpath {
  stroke-dasharray: 100;
  animation: secondanimate 12s linear forwards infinite;
}
@keyframes secondanimate {
  0% {
    stroke-dashoffset: 100;
  }
  41% {
    stroke-dashoffset: 0;
  }
}
.thirdpath {
  stroke-dasharray: 65;
  animation: thirdanimate 12s linear forwards infinite;
}
@keyframes thirdanimate {
  0% {
    stroke-dashoffset: 65;
  }
  41% {
    stroke-dashoffset: 0;
  }
}
line {
  opacity: 0;
}
.row1col1 {
  animation: blink 12s linear forwards infinite;
}
@keyframes blink {
  41% {
    opacity: 0;
  }
  42%, 100% {
    opacity: 1;
  }  

}
.row1col2 {
  animation: blink2 12s linear forwards infinite;
}
@keyframes blink2 {
  49% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
.row2col1 {
  animation: blink3 12s linear forwards infinite;
}
@keyframes blink3 {
  57% {
    opacity: 0;
  }
  58%, 100% {
    opacity: 1;
  }
}
.row2col2 {
  animation: blink4 12s linear forwards infinite;
}
@keyframes blink4 {
  66% {
    opacity: 0;
  }
  67%, 100% {
    opacity: 1;
  }
}
.row2col3 {
  animation: blink5 12s linear forwards infinite;
}
@keyframes blink5 {
  75% {
    opacity: 0;
  }
  76%, 100% {
    opacity: 1;
  }
}
.row3col1 {
  animation: blink6 12s linear forwards infinite;
}
@keyframes blink6 {
  84% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}

.row3col2 {
  animation: blink7 12s linear forwards infinite;
}
@keyframes blink7 {
  92% {
    opacity: 0;
  }
  93%, 100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">

  <g>
    <path class="firstpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M253.441,284.167c0,0-0.883-14.535,15.429-18.551c5.364-1.32,15.943-0.665,21.667,6.79c13.859,18.051-3.235,32.286-8.087,37.262
			c-4.853,4.979-7.713,21.027-17.543,20.528c-9.829-0.497-12.69-6.717-12.317-11.818" />

    <path class="secondpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M285.249,285.252c0,0,0.654-8.212-8.864-10.544c-9.519-2.334-16.796,8.211-10.825,17.449c2.613-1.12,5.226,0.652,5.599,2.52
			c0.373,1.866-1.213,4.199-3.826,4.199" />

    <path class="thirdpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M257.815,307.553c0,0-3.732,5.879,2.333,8.118c6.065,2.241,5.318-8.118,8.865-9.237c3.545-1.119,11.943-2.519,11.943-10.265
			c0-7.744-6.398-16.451-17.522-11.958" />
  </g>

  <line class="row1col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="287.987" x2="324.156" y2="286.627" />

  <line class="row1col2" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="285.335" x2="332.744" y2="284.167" />

  <line class="row2col3" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="338.25" y1="301.171" x2="343.41" y2="301.171" />

  <line class="row2col2" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="301.171" x2="333.75" y2="301.171" />

  <line class="row2col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="301.171" x2="324.156" y2="301.171" />

  <line class="row3col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="313.741" y1="314.625" x2="319.41" y2="315.987" />

  <line class="row3col2" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="323.741" y1="316.746" x2="329.667" y2="318.142" />

</svg>