1

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!

Connor Mooneyhan
  • 547
  • 6
  • 17
Eric Sayag
  • 45
  • 5
  • It's not clear to me what you're really trying to do, but is this helpful? https://designmodo.com/steps-css-animations/ – Kerri Feb 16 '22 at 19:17
  • I did see this article and it isn't quite what I need. I want an animation with a few transition and a jump cut in the middle. The article explains how to do step animation, but I want to combine it with transitions. I hope that makes sense. – Eric Sayag Feb 16 '22 at 19:20
  • Yes, the article explains that to combine steps and transitions, instead of building a transition that includes steps, you build a steps() that includes transitions. – Kerri Feb 16 '22 at 19:23
  • It seems to me that the article explains that as long as use enough steps, it can look like a smooth transition. I was hoping I could use percentage transitions in conjunction with steps. – Eric Sayag Feb 16 '22 at 19:38

1 Answers1

1

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;}
}
bowlowl
  • 417
  • 2
  • 7