CSS 动画：将步进动画与过渡相结合

Question

我是 CSS 动画的新手，想将过渡动画与步进动画结合起来。这可能吗？我想要一个过渡，但我需要在某一点跳切。这是我试过的：

@-webkit-keyframes DASH3{
  0%  {stroke-dashoffset:0;}
  50% {stroke-dashoffset:-800;}
  51% {stroke-dashoffset:800;}
  100% {stroke-dashoffset:0;}
}

我希望从 50% 到 51% 有 0 个过渡，所以我想为此使用步进动画，但我仍然希望有从 0 到 50% 到 100% 的过渡。我不知道这是否可能。是否有另一种方法可以仅使用 CSS 来做到这一点？谢谢！

Answer 1

您可以缩小百分比差距。

@-webkit-keyframes DASH3{
  0%  {stroke-dashoffset:0;}
  50% {stroke-dashoffset:-800;}
  50.00001% {stroke-dashoffset:800;}
  100% {stroke-dashoffset:0;}
}