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

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

1 个答案: