Can't run SVG animation in firefox

Question

I found this SVG animation online and it works in Chrome, but not in Firefox. I found a lot of answers, added -webkit-, but still not working. I tried to change percents to pixels in translateX(), but nothing. Or maybe I'm not doing it right.

https://codepen.io/anon/pen/MQRogz

HTML:

    body {
      background: #333;
      padding: 2em;
    }
    
    svg {
      display: block;
      left: 50%;
      max-width: 8em;
      position: absolute;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    
    #rect {
      animation: slideOver 5s linear infinite;
    }
    
    @-webkit-keyframes slideOver {
      0% {
        -webkit-transform: translateX(0);
      }
      25% {
        -webkit-transform: translateX(100%);
      }
      50% {
        -webkit-transform: translateX(100%);
      }
      75% {
        -webkit-transform: translateX(0);
      }
    }
    
    @keyframes slideOver {
      0% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(100%);
      }
      50% {
        transform: translateX(100%);
      }
      75% {
        transform: translateX(0);
      }
    }

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
      <defs>    
        <clipPath id="clip-path">
          <rect id="rect" x="0" y="0" height="346" width="250"/>
        </clipPath>
      </defs>
      
      <path fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
      <path clip-path="url(#clip-path)" fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>  
    </svg>

Answer 1

The solution SVG

Animation is achieved by placing a black cross on the same white cross and using the moving clipPath to the black cross.

As a shape outline for clipPath, a rectangle is used which, through the animation command, moves from the extreme left position to the extreme right position. Cutting out the sections of the black cross and thereby showing the white cross, which is located below the black cross.

Pauses in extreme positions are achieved by repeating the same digits of the attribute:
values = - 250; 0; 0; -250; -250

body {
  background: #333;
  padding: 2em;
}

svg {
  display: block;
  left: 50%;
  max-width: 8em;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
  <defs>    
    <clipPath id="clip-path1">
      <rect id="shadow" x="-250" y="-1" width="250" height="347"  >
	   <animate attributeName="x" dur="4s" begin="0s" values="-250;0;0;-250;-250" repeatCount="indefinite" />
      </rect> 
	</clipPath> 
  </defs>
    
  <!--  White cross -->
   <path  fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>   
 <!-- black cross along with the use of `clipPath`  -->
 <path clip-path="url(#clip-path1)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/> 
 </svg>

Answer 2

Assign the animation to the element to be animated, not to the used element. Change this:

#rect {
  animation: slideOver 5s linear infinite;
}

For this:

path:nth-child(2) {
  animation: slideOver 5s linear infinite;
}

Change the selector to whatever you need.