Question

我正在尝试将两个动画应用到单个SVG，这是我能够实现的，但是我无法弄清楚如何延迟一个而不是另一个，因为我希望他们玩一个然后另一个。

我喜欢第一个动画（SVG＆＃39; s路径＆＃34;绘制＆＃34;本身）来播放和完成自己，然后是第二个动画（SVG＆＃39; s）＆＃34;填写＆＃34;淡入）以后玩。

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

相关的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;
  }
}

假设您希望稍后启动填充动画，只需增加第二个块中的百分比，如果您想提前启动，则减少百分比。

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

@keyframes：https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Answer 2

你喜欢这样，用逗号分隔动画。

3s的{{1}}是应该开始动画之前的延迟

fill

Updated codepen

注意，我还将脚本超时更改为6秒。

更新

如果要使用1个关键帧，并假设您需要5秒。在每个动画上，将持续时间增加到10秒并且这样做。

由于animation: draw 5s ease forwards, fill 5s ease 3s forwards;动画有视觉延迟，因此我以35％而不是50％开始。

注意，您需要以100％重复fill-opacity，否则它会在动画结束时消失

stroke-dashoffset: 0;

Updated codepen 2

单个SVG有两个动画，一个仅通过CSS延迟播放另一个？

2 个答案: