javascript - 是否可以对路径动画进行排序

Question

我有一个 html 页面，它同时对三个 svg 路径进行动画处理。

@keyframes draw {
  100% {
    stroke-dashoffset: 1;
  }
}

.path {
  stroke-dasharray: 555;
  stroke-dashoffset: 555;
  -webkit-animation: draw 19s normal linear forwards;
  -moz-animation-name: draw 3s normal linear forwards;
  -o-animation-name: draw 3s normal linear forwards;
  animation-name: draw 3s normal linear forwards;
}

<svg class="multipath" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" xml:space="preserve">
  <path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 21.079449,129.62288 c 33.842653,-15.80707 -32.075893,-17.10715 0,0"/>
  <path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M 29.259532,121.44279 C 61.098099,135.68206 62.642648,115.18396 41.844279,94.385593 36.3407,88.882014 10.779265,91.868643 18.5625,91.868643 c 18.104688,0 27.15088,-5.255721 37.754236,-15.101694"/>
  <path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 55.058262,119.55508 c 19.137979,21.06152 26.855914,6.64597 25.169494,-22.023302"/>
</svg>

我如何对动画进行排序，即在第一条路径完成后为第二条路径设置动画，第三条接第二条。

Answer 1

您可以使用animation-delay 来获取动画序列

堆栈片段

@keyframes draw {
  100% {
    stroke-dashoffset: 1;
  }
}

.path {
  stroke-dasharray: 555;
  stroke-dashoffset: 555;
  animation: draw 3s linear forwards;
}

.path:nth-child(2) {
  animation-delay: 1s;
}

.path:nth-child(3) {
  animation-delay: 2s;
}

<svg class="multipath" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" xml:space="preserve">
  <path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 21.079449,129.62288 c 33.842653,-15.80707 -32.075893,-17.10715 0,0"/>
  <path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M 29.259532,121.44279 C 61.098099,135.68206 62.642648,115.18396 41.844279,94.385593 36.3407,88.882014 10.779265,91.868643 18.5625,91.868643 c 18.104688,0 27.15088,-5.255721 37.754236,-15.101694"/>
  <path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 55.058262,119.55508 c 19.137979,21.06152 26.855914,6.64597 25.169494,-22.023302"/>
</svg>