CSS transform not working with SVG in Firefox

Question

I have this simple hourglass animation made in SVG. The animation works in Chrome but does not work in Firefox. I am applying css transform translate to the #upper-fill-clip and #lower-fill-clip rect.

@keyframes flowdown {
  0% {
    transform: translateY(18%);
  }
  100% {
    transform: translateY(49.2%);
  }
}

@keyframes fillup {
  0% {
    transform: translateY(86.7%);
  }
  100% {
    transform: translateY(57.7%);
  }
}

@keyframes flip {
  0% {
    transform: rotate(0deg);
  }
  99.4% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

#hourglass,
#hourglass #upper-fill-clip,
#hourglass #lower-fill-clip {
  fill: #000000;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#hourglass {
  animation-name: flip;
  transform-origin: center center;
}

#hourglass #upper-fill-clip {
  animation-name: flowdown;
  transform: translateY(18%);
}

#hourglass #lower-fill-clip {
  animation-name: fillup;
  transform: translateY(86.7%);
}

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="212.17653" height="310" id="hourglass">
  <defs>
      <clipPath id="flowdown">
          <path d="m 153.09976,190.92975 c 22.09717,217.28036 179.31249,274.21877 197.89215,327.9765 l 62.9374,0 c 18.72854,-53.17156 176.30873,-105.92478 197.9976,-327.99097" style="stroke-width:0" />
      </clipPath>
      <clipPath id="fillup">
          <path d="M 296.23029,608.69417 C 236.36177,663.1914 150.52311,748.96721 150.52311,928.875 l 231.9375,0 231.9375,0 c 0,-181.67405 -83.81727,-266.73823 -143.5691,-320.06035" style="stroke-width:0" />
      </clipPath>
  </defs>
  <g transform="matrix(0.3117516,0,0,0.3117516,-13.144444,-11.10242)" id="layer1">
      <g transform="translate(14,-26)" id="g4027">
          <rect width="648.51801" height="43.605999" x="44.201607" y="-1039.9561" transform="scale(1,-1)" id="rect3782" style="fill:#000000;fill-opacity:1;stroke:none" />
          <rect width="579.82764" height="60" x="78.546791" y="-999.65149" transform="scale(1,-1)" id="rect3784" style="fill:#000000;fill-opacity:1;stroke:none" />
      </g>
      <path d="m 150.53125,138.59375 c 0,276.24024 202.375,328.98438 202.375,390.46875 0,1.83297 -1.12281,3.21907 -0.71875,4.6875 -0.40197,1.4611 0.71875,2.83465 0.71875,4.65625 0,59.91583 -202.375,114.22851 -202.375,390.46875 l 231.9375,0 231.9375,0 c 0,-282.29589 -202.375,-331.32933 -202.375,-390.46875 0,-1.8216 1.12072,-3.19515 0.71875,-4.65625 0.40406,-1.46843 -0.71875,-2.85453 -0.71875,-4.6875 0,-61.32924 202.375,-108.17286 202.375,-390.46875 l -231.9375,0 z" id="path3788" style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
      <g transform="translate(14,-26)" id="g4043">
          <rect width="648.51801" height="43.605999" x="44.201607" y="77.651443" id="rect4033" style="fill:#000000;fill-opacity:1;stroke:none" />
          <rect width="579.82764" height="60" x="78.546791" y="117.95601" id="rect4035" style="fill:#000000;fill-opacity:1;stroke:none" />
      </g>

      <g clip-path="url(#flowdown)">
          <rect width="744.09448" height="1052.3622" x="0" y="0" id="upper-fill-clip" />
      </g>
      <g clip-path="url(#fillup)" >
          <rect width="744.09448" height="1052.3622" x="0" y="0" id="lower-fill-clip" />
      </g>
  </g>
</svg>

Inspecting the elements #upper-fill-clip and #lower-fill-clip show that both elements are not getting translated.