Illep Illep - 1 year ago 41
CSS Question

Stop animating of a SVG file - Code snippet included

I am using a

image and animating the path of a diagram. It works fine. However, Once the image has been drawn I need to stop the iteration (stop from the image being redrawn). The code is found in this CODEPEN snippet attached here.

I tried removing
in the
file, but the drawn image is being removed.

What I want to do is:

1.) Animate the image as shown in the code.

2.) Stop the animation from reanimating (this is because of the
attribute used in the

3.) Once the image has been drawn, the image should remain the same unless the user refreshes the page.

Answer Source

Change this line:

animation: draw 10s infinite linear;

to this:

animation: draw 10s forwards;

The forwards fill mode works as follows: After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended