防止 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