Transform/translate errors that occur exclusively in Mozilla

Question

I've an issue with transform/translation glitches within an animation. The errors occur exclusively within Mozilla, obviously, but are functioning in Chrome. I realize that this is a repeated issue, so I first did some research at CSS3 and MDN, reviewed these questions, and ensured for the functionality of transform here. With that in tow, I remain confused.

body {
  overflow: hidden;
  background: #e8e8e8;
}

.floor {
  height: 90px;
  width: 450px;
  border-bottom: 1px solid #e8e8e8;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -250px;
}

.box {
  box-sizing: border-box;
  width: 90px;
  height: 90px;
  border-radius: 2px;
  background: #d0d0d0;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-animation: turnMove 3500ms infinite alternate cubic-bezier(0.75, 0, 0.175, 1);
    -moz-animation: turnMove 3500ms infinite alternate cubic-bezier(0.75, 0, 0.175, 1);
    -o-animation: turnMove 3500ms infinite alternate cubic-bezier(0.75, 0, 0.175, 1);
    animation: turnMove 3500ms infinite alternate cubic-bezier(0.75, 0, 0.175, 1);
    animation-play-state: play;
    animation-delay: 0ms;
}

@keyframes turnMove {
  0% {
    transform: translate(0, 0) rotate(0turn);
    transform-origin: 100% 100%;
  }
  25% {
    transform: translate(0, 0) rotate(0.25turn);
    transform-origin: 100% 100%;
    animation-timing-function: step-end;
    background: #b9b9b9;
  }
  25.01% {
    transform: translate(90px, 90px) rotate(0.25turn);
    transform-origin: 100% 0;
    background: #b9b9b9;
  }
  50% {
    transform: translate(90px, 90px) rotate(0.5turn);
    transform-origin: 100% 0;
    animation-timing-function: step-end;
    background: #a2a2a2;
  }
  50.01% {
    transform: translate(270px, 90px) rotate(0.5turn);
    transform-origin: 0 0;
    background: #a2a2a2;
  }
  75% {
    transform: translate(270px, 90px) rotate(0.75turn);
    transform-origin: 0 0;
    animation-timing-function: step-end;
    background: #8b8b8b;
  }
  75.01% {
    transform: translate(360px, 0) rotate(0.75turn);
    transform-origin: 0 100%;
    background: #8b8b8b;
  }
  100% {
    transform: translate(360px, 0) rotate(1turn);
    transform-origin: 0 100%;
    background: #747474;
  }
}

@-webkit-keyframes turnMove {
  0% {
    transform: translate(0, 0) rotate(0turn);
    transform-origin: 100% 100%;
  }
  25% {
    transform: translate(0, 0) rotate(0.25turn);
    transform-origin: 100% 100%;
    animation-timing-function: step-end;
    background: #b9b9b9;
  }
  25.01% {
    transform: translate(90px, 90px) rotate(0.25turn);
    transform-origin: 100% 0;
    background: #b9b9b9;
  }
  50% {
    transform: translate(90px, 90px) rotate(0.5turn);
    transform-origin: 100% 0;
    animation-timing-function: step-end;
    background: #a2a2a2;
  }
  50.01% {
    transform: translate(270px, 90px) rotate(0.5turn);
    transform-origin: 0 0;
    background: #a2a2a2;
  }
  75% {
    transform: translate(270px, 90px) rotate(0.75turn);
    transform-origin: 0 0;
    animation-timing-function: step-end;
    background: #8b8b8b;
  }
  75.01% {
    transform: translate(360px, 0) rotate(0.75turn);
    transform-origin: 0 100%;
    background: #8b8b8b;
  }
  100% {
    transform: translate(360px, 0) rotate(1turn);
    transform-origin: 0 100%;
    background: #747474;
  }
}

@-moz-keyframes turnMove {
  0% {
    transform: translate(0, 0) rotate(0turn);
    transform-origin: 100% 100%;
  }
  25% {
    transform: translate(0, 0) rotate(0.25turn);
    transform-origin: 100% 100%;
    animation-timing-function: step-end;
    background: #b9b9b9;
  }
  25.01% {
    transform: translate(90px, 90px) rotate(0.25turn);
    transform-origin: 100% 0;
    background: #b9b9b9;
  }
  50% {
    transform: translate(90px, 90px) rotate(0.5turn);
    transform-origin: 100% 0;
    animation-timing-function: step-end;
    background: #a2a2a2;
  }
  50.01% {
    transform: translate(270px, 90px) rotate(0.5turn);
    transform-origin: 0 0;
    background: #a2a2a2;
  }
  75% {
    transform: translate(270px, 90px) rotate(0.75turn);
    transform-origin: 0 0;
    animation-timing-function: step-end;
    background: #8b8b8b;
  }
  75.01% {
    transform: translate(360px, 0) rotate(0.75turn);
    transform-origin: 0 100%;
    background: #8b8b8b;
  }
  100% {
    transform: translate(360px, 0) rotate(1turn);
    transform-origin: 0 100%;
    background: #747474;
  }
}

<div class="floor">
    <div class="box"></div>
</div>

Here too is the codepen.

As you can see (and as far as my knowledge can allow), I've included the -moz- prefix before keyframes and transformations where necessary (if necessary). However, with each translation/turn of the box, the box will first translate a great distance from its intended location, return, then resume the animation until it repeats this error on the next translation/turn. It appears as a rapid glitch, visible only for a frame or two.

I thought at first that it may be due to how I parsed the percentages of the keyframes, or perhaps a miscommunication of the utilized transform short-hand, but, after testing, I still cannot say for sure. I've not found any alteration of the code that might alter the error or smooth it at any step.

As the animation plays smoothly in Chrome, I would like it also to do so in Mozilla. Any assistance on this matter would be greatly appreciated.