CSS动画:步骤动画与转换的结合

Question

我是新的工作CSS动画，并希望结合过渡动画和步骤动画。这个是可能的吗？我想要一个过渡，但我需要跳槽在某一时刻。这就是我试过的：

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

我希望有0从50%到51%，所以我想使用一个步骤动画，但我仍然希望从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;}
}