Question

我在动画中遇到转换/翻译故障的问题。显然，这些错误仅在Mozilla中发生，但在Chrome中正在运行。我意识到这是一个重复的问题，所以我首先在CSS3和MDN，reviewed these questions做了一些研究，并确保了{{1}的功能} here。随着这一切，我仍然感到困惑。

＆＃13;

transform

＆＃13;

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

＆＃13;

这里也是codepen。

正如您所看到的（据我的知识所允许），我在必要时（如有必要）在关键帧和转换之前包含了<div class="floor"> <div class="box"></div> </div>前缀。但是，随着每个翻译/翻转框，该框将首先从其预期位置转换很远的距离，返回，然后恢复动画，直到它在下一个翻译/转弯时重复此错误。它看起来像一个快速的故障，只能看到一两帧。

我一开始认为这可能是由于我如何解析关键帧的百分比，或者可能是使用的-moz-短手的错误传达，但是，经过测试，我仍然不能肯定地说。我没有发现任何可能改变错误或在任何步骤使其平滑的代码更改。

由于动画在Chrome中流畅播放，我希望它也能在Mozilla中播放。对此事的任何帮助将不胜感激。

转换/转换仅在Mozilla中发生的错误

0 个答案: