css - 防止 SVG 动画中的复选标记消失

Question

我有我想要的 CSS 动画。完整的动画是圆形要循环，完成它的形状。圆圈中间的复选标记会稍有延迟。这样，两个形状大约同时完成。

当动画最终完成时，复选标记就会消失。

我知道复选标记最后消失的原因是因为我在复选标记元素上将 CSS 中的不透明度设置为 0。我查看了其他技术，发现该技术过去常常让元素在动画完成后仍然出现。

为什么即使在动画结束时将不透明度设置为 1，复选标记也会消失？有没有办法解决这个问题和/或是否有更好的方法来完成我想要的？

非常感谢任何帮助!

这是 SVG:

<svg xmlns="http://www.w3.org/2000/svg" id="checkmark-group" viewBox="0 0 128 128">
  <title>
    Successful Login
  </title>
  <circle id="circle" cx="64" cy="64" r="59.4"/>
  <path id="checkmark" d="M24.75 62l27.5 27.5 51-51"/>
</svg>

这是 CSS:

svg {
  width: 128px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

circle, #checkmark {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 4px;
  stroke-dasharray: 400;
}

#checkmark {
  animation: checkmark-stroke 3s reverse;
  animation-delay: 1s;
  opacity: 0;
}

@keyframes checkmark-stroke {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  1% { opacity: 1; }
  100% {
    stroke-dashoffset: 400;
    opacity: 1;
  }
}

circle {
  animation: circle-stroke 3s;
}

@keyframes circle-stroke {
  from {
    stroke-dashoffset: -400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

这是通过 CodePen 运行的代码的链接:https://codepen.io/abrielshipley/pen/QOKBGE

Answer 1

您要找的特性是animation-fill-mode .只需将关键字 forwards 添加到两个 animation 速记属性的末尾即可。

似乎 reverse 和 forwards 不混合(至少在某种程度上我能理解)。您应该通过交换关键帧上的 0% 和 100% 来描述 checkmark-stroke 动画。可能您还需要更改 animation-timing-function:https://codepen.io/anon/pen/rYWvyq