I’m using click event to trigger CSS animation, why wouldn’t the animation run again when clicked again?

I’m new to web dev, I’m trying to get a better understanding on DOM.

The purpose of my code is to give an element some animation when a click event is triggered. Here’s what I tried:

HTML:

<svg id="svg" width="300" height="300"></svg>
<button id="button">button</button>

CSS:

    svg {
            background-color: lightcyan;
    }

    @keyframes svg-color {
            0% {
                background-color: lightcyan;
            }
            50% {
                background-color: skyblue;
            }
            100% {
                background-color: steelblue;
            }
    }

JS:

    const svg = document.getElementById('svg');
    const button = document.getElementById('button');

    button.onclick = function (){
        svg.style.animation = 'svg-color 5s linear 1 1s';
    }

It works on the first click event. But when I click the button again, the animation won’t run again.

Is this issue due to DOM or the fact that I have set animation-iteration-count as 1 on CSS?

And if I set animation-iteration-count as infinite, is there a way to make the animation goes back to its start state and replay again on click event?