CODEWITHSUNDEEP
cssanimationcss-animationscss-transitionstransition
Eric Sayag
Eric Sayag

Reputation: 41

CSS Animation: Combining Step Animation with Transitions

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!

Upvotes: 1

Views: 174

Answers (1)

bowlowl
bowlowl

Reputation: 467

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;}
}

Upvotes: 1

Related Questions