Setting keyTimes for SVG visibility animation - animation

Question

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
<g id="lightning">
<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" />
<animate attributeType="CSS"
attributeName="visibility"
from="hidden"
to="hidden"
values="hidden;visible;hidden"
keyTimes="0; 0.5; 0.6"
dur="2s"
repeatCount="indefinite"/>
</g>
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.

Answer 1

From the SVG specification
For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The key time associated with each value defines when the value is set; values are interpolated between the key times.
You haven't specified a calcMode, but the default is linear so the last value must be 1 or the animation is invalid and ignored.
Here's what happens if I set the last value to 1.
<svg id="lightning">
<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" />
<animate attributeType="CSS"
attributeName="visibility"
from="hidden"
to="hidden"
values="hidden;visible;hidden"
keyTimes="0; 0.5; 1"
dur="2s"
repeatCount="indefinite"/>
</svg>