css - 由firefox而不是chrome反转的css旋转动画

Question

<div class='box'></div>
<style>
.box{
  background:  linear-gradient(90deg, red 0%, blue 50%);
  width: 50px ;
  height:50px;
  margin-left:auto;
  margin-right:auto;
  left: 0px;
  right:0px;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;

 -webkit-animation: square-animatee 3.5s .1s linear infinite;
        -moz-animation: square-animate 3.5s .1s linear infinite;
          -o-animation: square-animate 3.5s .1s linear infinite;
             animation: square-animate 3.5s .1s linear infinite;
}
@keyframes square-animate {
    5% {
        -webkit-transform: translateY(25%) rotate(22.5deg);
           -moz-transform: translateY(25%) rotate(22.5deg);
             -o-transform: translateY(25%) rotate(22.5deg);
                transform: translateY(25%) rotate(22.5deg);
    }
   7% {
        border-bottom-right-radius: 100%;
        -webkit-transform: translateY(50%) scale(1, .9) rotate(40deg);
           -moz-transform: translateY(50%) scale(1, .9) rotate(40deg);
             -o-transform: translateY(50%) scale(1, .9) rotate(40deg);
                transform: translateY(50%) scale(1, .9) rotate(40deg);
    }
   10% {
        -webkit-transform: translateY(25%) rotate(60deg);
           -moz-transform: translateY(25%) rotate(60deg);
             -o-transform: translateY(25%) rotate(60deg);
                transform: translateY(25%) rotate(60deg);
      
    }
  15% {
        -webkit-transform: translateY(0) rotate(90deg);
           -moz-transform: translateY(0) rotate(90deg);
             -o-transform: translateY(0) rotate(90deg);
                transform: translateY(0) rotate(90deg);
                    border-bottom-right-radius: 10%;   

    }
25%{
    -webkit-transform:  scale(1, .9) rotate(140deg);
       -moz-transform: scale(1, .9) rotate(140deg);
         -o-transform:  scale(1, .9) rotate(140deg);
            transform: scale(1, .9) rotate(140deg);
}
45%{
    -webkit-transform: translateY(5%) rotate(280deg);
    -moz-transform:  translateY(25%) rotate(280deg);
      -o-transform: translateY(25%) rotate(280deg);
         transform:  translateY(25%) rotate(280deg);

border-bottom-left-radius: 10%;
}
50%{
    -webkit-transform: translateY(50%) rotate(300deg);
    -moz-transform:  translateY(50%) rotate(300deg);
      -o-transform: translateY(50%) rotate(300deg);
         transform:  translateY(50%) rotate(300deg);
         border-bottom-left-radius: 100%;

}
54%{
    -webkit-transform: translateY(25%) rotate(360deg);
       -moz-transform: translateY(25%) rotate(360deg);
         -o-transform: translateY(25%) rotate(360deg);
            transform: translateY(25%) rotate(360deg);
    
}
60%{
    -webkit-transform: translateY(0%) rotate(420deg);
    -moz-transform: translateY(0%) rotate(420deg);
      -o-transform: translateY(0%) rotate(420deg);
         transform: translateY(0%) rotate(420deg);
    border-bottom-left-radius: 10%;
  
}

80%{
    -webkit-transform: translateY(0%) rotate(520deg);
    -moz-transform:  translateY(0%) rotate(520deg);
      -o-transform: translateY(0%) rotate(520deg);
         transform:  translateY(0%) rotate(520deg);
}
90%{


    -webkit-transform: translateY(-10%)   scale(1, 1.5) rotate(1050deg);
    -moz-transform: translateY(-10%)  scale(1, 1.5)  rotate(1050deg);
      -o-transform:  translateY(-10%)  scale(1.5, 1.5)  rotate(1050deg);
        transform:  translateY(-10%)  scale(1.5, 1.5)  rotate(1050deg);
}
95%{


    -webkit-transform: translateY(-20%)  rotate(1060deg);
    -moz-transform: translateY(-20%)  rotate(1060deg);
      -o-transform:  translateY(-20%)  rotate(1060deg);
        transform:  translateY(-20%) rotate(1060deg);
}
100%{

    -webkit-transform: translateY(0%)  rotate(1080deg);
       -moz-transform: translateY(0%)  rotate(1080deg);
         -o-transform:  translateY(0%)  rotate(1080deg);
            transform:  translateY(0%) rotate(1080deg);
           
        
    }
}
</style>

这是代码笔：

https://codepen.io/GrandDominus/pen/yLMPRrx

在 Firefox 中，正方形的旋转中途反转。但在 Chrome 中它很好。如何强制 firefox 继续沿同一方向旋转？

Stackoverflow 提示我“看起来您的帖子主要是代码；请添加更多详细信息。”。我不知道如何进一步阐述这个问题，因为这个问题很简单，所以我在这里输入这个文本。

标签： cssgoogle-chromefirefoxcss-animations