CODEWITHSUNDEEP
csscss-animationssvg-animate
Amanda Natallie
Amanda Natallie

Reputation: 41

I want to reverse direction of animation on my SVG

I have this codepen animation: Codepen SVG Testing

.anim {
  width:500px;
  height:281.25px;
  margin: 0;
  padding: 0;
 }
 svg {
  width: 100%;
  height:100%;
  stroke-width:10px;
  stroke: #ff0000;
  stroke-dasharray: 10000;
  stroke-dashoffset: 10000;
  animation: dash 3s ease-in-out forwards infinite;
}

@keyframes dash {
  to {
  stroke-dashoffset: 0;
 }
}

and my HTML: 

 <div class="anim">
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">
   <path fill="none" d="M0,392.306V1080h1920V647.331c0,0-165.5,91.836-384.623,105.011
c-215.715,12.97-302.606-198.286-324.033-252.025c-20.759-52.064-258.025-465.046-591.059-24.002c0,0-150.015,249.024-396.04-24.002
C224.246,452.312,150.792,368.303,0,392.306z"/>
  </svg>
</div>

The animation starts on the top left corner to bottom (forwards).

I want it to start on the same top left, but moving to the right direction, where the waves are, then move to right bottom, then left bottom, then top left and finish.

I've tried animation-direction: reverse; but it just do the same thing but backwards. I need to do this only with css. What am I missing?

Upvotes: 0

Views: 894

Answers (2)

Cellcon
Cellcon

Reputation: 1295

This is a little bit more complex, but works also in Safari for iOS.

@keyframes draw {
  from {
    stroke-dashoffset: 20000;
  }
  to {
    stroke-dashoffset: 10000;
  }
}

Upvotes: 0

Amanda Natallie
Amanda Natallie

Reputation: 41

i found a solution. Just change the value on 

stroke-dashoffset: 10000;

to 

stroke-dashoffset: -10000;

Upvotes: 1

Related Questions