How to animate the fill color of SVG with CSS?

Question

CSS allows to change the color of SVG like this

.clr {fill: green;}

But when I apply animation with the same fill attributes nothing seems to work. What should I do?

<svg width="800" height="600" style="background-color:lightblue">

<circle class="clr" cx="610" cy="240" r="4" fill="gold" />

<style>

.clr {animation: col 3s linear infinite;}

@keyframes col {
0%,71% {fill:none}
72% {fill:black}
75%,100% {fill:none}
}

</style>
</svg>

Answer 1

Its working as expected, I just increased the circle radius and changed its position to show it on 50x and 50y,

.color {animation: col 3s linear infinite;}

@keyframes col {
0%,71% {fill:none}
72% {fill:black}
75%,100% {fill:none}
}

<svg width="800" height="600" style="background-color:lightblue">
  <circle class="color" cx="50" cy="50" r="30" fill="gold" />
</svg>

Answer 2

You Just add fill:black in @keyframes section. change it to green like this:

.color {animation: col 3s linear infinite;}

@keyframes col {
0%,71% {fill:none}
72% {fill:green}
75%,100% {fill:none}
}

<svg width="800" height="600" style="background-color:lightblue">
<circle class="color" cx="610" cy="240" r="4" fill="gold" />
</svg>

and don't want to use .color {fill: green;}.