html - 带有两个动画的单个 SVG，一个仅通过 CSS 在另一个之后延迟播放？

Question

我正在尝试将两个动画应用到一个 SVG，我已经能够实现这一点，但是我不知道如何延迟一个而不是另一个，因为我希望它们先播放一个，然后播放另一个。

我希望第一个动画(SVG 的路径“绘制”自身)自行播放并完成，然后再播放第二个动画(SVG 的“填充”淡入)。

我见过人们在 CSS 中使用动画延迟，但这适用于两个动画而不是单个动画，因为它是单个 SVG 目标。

这是CodePen .

以及相关的CSS:

.preload-container__svg-wrap svg{
  stroke: #EE2D24;
  fill: #EE2D24;
  fill-opacity: 0;
  width: 100%;
  height: auto;
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
  animation: draw/*,fill*/ 5s ease forwards;
}

@keyframes draw {
  to {stroke-dashoffset: 0}
}

@keyframes fill {
  to {fill-opacity: 1}
}

笔中的JQ不相关，我在这里关注CSS问题。

Answer 1

您可以将多个关键帧选择器添加到单个动画中。有关此内容的更多详细信息，请参阅答案末尾(以及链接页面末尾)的链接。

有了这个，你可以很容易地实现我相信你正在寻找的东西，通过用它替换你的动画(我还在下面包含了一个修改后的 Codepen 与此更改):

@keyframes drawAndFill {
  0% {
    stroke-dashoffset: auto;
    fill-opacity: 0;
  }
  20% {
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

Assuming you would like to have your fill animation start later, just increase the percentage in the second block, equally if you would like to start it earlier, decrease the percentage.

https://codepen.io/anon/pen/GEEOdv

更新:

为了回应对该问题的评论，并无缝地对动画的两个阶段进行排队，可以按如下方式更改上述内容以实现所需的行为:

@keyframes drawAndFill {
  0% {
    stroke-dashoffset: auto; 
  }
  50% {
    fill-opacity: 0;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

---

• @关键帧:https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp