svg fill animation does not work in firefox

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

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>