handleman
8/24/2017 - 7:34 AM

How to animate the fill color of SVG with CSS?

How to animate the fill color of SVG with CSS?

<svg width="800" height="600" style="background-color:lightblue">
  <circle class="color" cx="50" cy="50" r="30" fill="gold" />
</svg>
.color {animation: col 3s linear infinite;}

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