CSS Animation: Combining Step Animation with Transitions-CodePudding

I am new to working on CSS Animations and want to combine a transition animation with step animation. Is this possible? I want a transition, but I need a jump cut at one point. This is what I tried:

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

I would like there to be 0 transition from 50% to 51%, so I would like to use a step animation for that, but I still want there to be transition from 0 to 50% to 100%. I don't know if this is possible. Is there another way to do this with only CSS? Thanks!

CodePudding user response：

You can just decrease the percentage gap.

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