Svg fill animation not working in firefox

Question

Does anyone know why this code does not work in FF? Everything is fine in chrome, but not in FF. Points are not filled with white, they simply remain blank.

 <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, the duration cannot start from a complete stop. Adding a lead of 0 because the specification requires .7 to become 0.7 fixes things in Firefox.

I also added a background rectangle, since white on white does not display too well in the fragment.

     <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>

Run codeHide result

Answer 2

, SMIL , CSS

none , 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>

Hide result

---

: Chrome CSS/Web SMIL, SMIL , , .