CSS + SVG 无限动画，每次迭代之间有延迟

Question

我的代码在这里显示复选标记的动画。

它有效，但问题是，它不循环。它只动画 1 次。我想要的是每 2 秒动画一次。

Codepen链接： http: //codepen.io/haniotis/pen/KwvYLO

CSS 看起来像这样：

@import "bourbon";

$color--green: #7ac142;
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: $color--green;
  fill: none;
  animation: stroke .6s $curve forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px $color--green;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke .3s $curve .8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px $color--green;
  }
}

HTML 看起来像这样：

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
  <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
  <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>

Answer 1

注意：虽然这个问题与我在评论中链接的问题部分相似，但由于存在需要链接在一起的多个动画，因此它有点复杂，因此我添加一个单独的答案来解释它。

使任意 CSS3 动画无限次运行非常简单。animation-iteration-count只需将其设置为即可实现infinite。但是让动画每 [x] 秒重复一次要复杂得多，因为正如我在此处的回答中所解释的，该animation-delay属性仅在动画的第一次迭代之前添加延迟，而不是在每次迭代之前添加延迟。

该答案解释了如何在每次迭代之间添加延迟，因此我不会详细介绍这一点。但您的情况有点复杂，因为有四个动画链接在一起才能产生效果，因此需要修改所有动画才能使其正常工作。

要使其每 2 秒无限重复，您需要执行以下操作：

• 添加animation-iteration-count: infinite到所有 4 个动画（或）只需将infinite关键字添加到所有animation速记属性。
• 首先计算整个动画（所有 4 个动画加在一起）运行的总时间。在您的原始片段中，它运行了 1.2 秒，您需要延迟 2 秒，因此动画的总持续时间为 3.2 秒。这 3.2 秒应该是所有 4 个动画的持续时间。
• 动画本来.checkmark__circle应该运行.6s并且没有延迟。.6s大约是 18.75% 3.2s，因此应该更改动画的关键帧，以便整个动画在 18.75% 标记处完成，并保持这种状态直到 100% 标记。
• 动画.checkmark__check应该有延迟，延迟时间.8s为持续时间的 25% 3.2s。因此它应该从 25% 标记开始，持续时间.3s约为 的 9.37% 3.2s。因此，此动画应从 25% 标记开始，并在达到 34.37% 标记时完成。从那时起直到 100% 标记，它必须保持该状态。由于关键帧现在与圆形动画不同，我们需要添加两个不同的@keyframes规则。
• 填充动画.checkmark具有.4s持续时间和相同的延迟。因此，它应该从 12.5% 标记开始，在 25% 标记处完成，并保持这种状态直到 100% 标记。
• 缩放动画.checkmark有.3s持续时间和.9s延迟。因此，这必须从 28.125% 标记开始，到 37.5% 标记完成。这意味着中点（应该transform: scale3d(1.1, 1.1, 1);是 32.8125% 标记）。

完成所有这些更改后，动画将无限运行，每个循环之间延迟 2 秒。下面是使用编译后的 CSS 的演示。SCSS 版本可在此处获取。

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 3.2s cubic-bezier(0.65, 0, 0.45, 1) forwards infinite;
}
.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill 3.2s ease-in-out forwards infinite, scale 3.2s ease-in-out both infinite;
}
.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke-check 3.2s cubic-bezier(0.65, 0, 0.45, 1) forwards infinite;
}
@keyframes stroke {
  18.75%, 100% {
    stroke-dashoffset: 0;
  }
}
@keyframes stroke-check {
  25% {
    stroke-dashoffset: 48;
  }
  34.37%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 28.125%, 37.5%, 100% {
    transform: none;
  }
  32.8125% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  12.5% {
    box-shadow: inset 0px 0px 0px #7ac142;
  }
  25%,
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
  <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
  <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>