How to make it so that after the animation it remains, and does not return to the css or js output?

Question

css

I have such a PEN:
https://codepen.io/tanya-nami/pen/xxrJLgY
The animation was corrected as I needed, BUT I need the background fill to remain after it reaches the end and not be removed. Please tell me how to do it? I would be very grateful because I can’t find a sensible example and way out! Thank you!

Answer 1

If you understand correctly, and it is necessary that after a single click, the circle fills with color and remains, then you can add a regular class
instead of a pseudo -class.:active

Answer 2

animation-fill-mode:forwards