Setting keyTimes for SVG visibility animation
<p>I'm trying to create a flashing lightning icon with SVG but I can't get keyTimes to work. The intention is to set up a more realistic flash with uneven steps between on and off but for the purposes of this question I have simplified the SVG like so</p>

<pre><code>&lt;g id="lightning"&gt;
    &lt;polygon fill="#FFD744" points="55.724,91.297 41.645,91.297 36.738,105.038 47.483,105.038 41.622,124.568 62.783,98.526 51.388,98.526" /&gt;

    &lt;animate attributeType="CSS"
         attributeName="visibility"
         from="hidden" 
         to="hidden"
         values="hidden;visible;hidden"
         keyTimes="0; 0.5; 0.6"
         dur="2s"
         repeatCount="indefinite"/&gt;


&lt;/g&gt;
</code></pre>

<p>However if I have the keyTimes attribute all flashing stops and the lightning bolt is static on the screen. If I remove the attribute the flashing is slow because the loop is two seconds long and it just oscillates gently back and forth.</p>