title: How to animate the fill color of SVG with CSS?
body: <p>CSS allows to change the color of SVG like this</p>
  
  <pre><code>.clr {fill: green;}
  </code></pre>
  
  <p>But when I apply animation with the same fill attributes nothing seems to work. What should I do?</p>
  
  <pre><code>&lt;svg width="800" height="600" style="background-color:lightblue"&gt;
  
  &lt;circle class="clr" cx="610" cy="240" r="4" fill="gold" /&gt;
  
  &lt;style&gt;
  
  .clr {animation: col 3s linear infinite;}
  
  @keyframes col {
  0%,71% {fill:none}
  72% {fill:black}
  75%,100% {fill:none}
  }
  
  &lt;/style&gt;
  &lt;/svg&gt;
  </code></pre>