Illep Illep - 3 months ago 6
CSS Question

Stop animating of a SVG file - Code snippet included

I am using a

SVG
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
infinite
from
animation
in the
CSS
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
infinite
attribute used in the
animation
)

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

Answer

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