svg fill animation does not work in firefox - css

Question

Does anybody know why this code doesnt work in FF ? In chrome everything is ok but not in FF. The dots dont fill with the white color, just stay unfilled.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.57 26.18">
<defs>
<style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style>
</defs>
<title>kropeczki</title>
<g id="Warstwa_2" data-name="Warstwa 2">
<g id="Layer_1" data-name="Layer 1">
<circle class="cls-1" cx="13.09" cy="13.09" r="12.09">
<animate
attributeName="fill" from="none" to="#fff" begin="0.7" dur=".1s" fill="freeze" repeatCount="1"/>
</circle>
<circle class="cls-1" cx="64.79" cy="13.09" r="12.09">
<animate
attributeName="fill" from="none" to="#fff" begin="1" dur=".1s" fill="freeze" repeatCount="1"/>
</circle>
<circle class="cls-1" cx="116.49" cy="13.09" r="12.09">
<animate
attributeName="fill" from="none" to="#fff" begin="1.3" dur=".1s" fill="freeze" repeatCount="1"/>
</circle>
</g>
</g>
</svg>

Answer 1

Considering that SMIL doesn't work cross browser, may I suggest you use CSS animation instead
Animate the color none won't work, use transparent
body {
background: gray;
}
.cls-1 {
fill: transparent;
stroke: #fff;
stroke-miterlimit: 10;
stroke-width: 2px;
-webkit-animation-name: setcolor;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-name: setcolor;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.cls-1:nth-child(2) {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.cls-1:nth-child(3) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes setcolor {
100% {
fill: white;
}
}
#-webkit-keyframes setcolor {
100% {
fill: white;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.57 26.18">
<title>kropeczki</title>
<g id="Warstwa_2" data-name="Warstwa 2">
<g id="Layer_1" data-name="Layer 1">
<circle class="cls-1" cx="13.09" cy="13.09" r="12.09">
</circle>
<circle class="cls-1" cx="64.79" cy="13.09" r="12.09">
</circle>
<circle class="cls-1" cx="116.49" cy="13.09" r="12.09">
</circle>
</g>
</g>
</svg>
Note, since Chrome favor CSS/Web animations over SMIL, the future of SMIL might be somewhat unpredictable, so I would recommend to wait using it until its future is more secured.

Answer 2

According to the SVG and SMIL specifications durations are not allowed to start with a full stop. Adding a leading 0 as the specification demands so that .7 becomes 0.7 fixes things in Firefox.
I've also added a background rect as white on white does not show up too well in a snippet.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.57 26.18">
<defs>
<style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style>
</defs>
<title>kropeczki</title>
<g id="Warstwa_2" data-name="Warstwa 2">
<rect width="100%" height="100%" fill="black"/>
<g id="Layer_1" data-name="Layer 1">
<circle class="cls-1" cx="13.09" cy="13.09" r="12.09">
<animate
attributeName="fill" from="none" to="#fff" begin="0.7" dur="0.1s" fill="freeze" repeatCount="1"/>
</circle>
<circle class="cls-1" cx="64.79" cy="13.09" r="12.09">
<animate
attributeName="fill" from="none" to="#fff" begin="1" dur="0.1s" fill="freeze" repeatCount="1"/>
</circle>
<circle class="cls-1" cx="116.49" cy="13.09" r="12.09">
<animate
attributeName="fill" from="none" to="#fff" begin="1.3" dur="0.1s" fill="freeze" repeatCount="1"/>
</circle>
</g>
</g>
</svg>