Firefox为什么不能在PC和android上正确播放此动画？

如何解决Firefox为什么不能在PC和android上正确播放此动画？

Pavel Laptev在CSS中已完成a 2001 Stargate codepen。这是CSS：

@mixin centerer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0%);
}

.wrap{
    display:flex;
    flex-direction:row;
}

.center{
    @include centerer;
    border-radius:100%;
    filter:blur(2px);
    z-index:99999;
    width:8px;
    height:110vh;
    background:black;
}

.right{
    display:flex;
    align-items:stretch;
    height:100vh;
    width:50%;
    flex-direction:column;
    transform-origin:right;
    transform: perspective(80px) rotateY(110deg);
}
.left{
    display:flex;
    align-items:stretch;
    height:100vh;
    width:50%;
    flex-direction:column;
    transform-origin: left;
    transform: perspective(80px) rotateY(-110deg);
}

.split_right{
    transform: scaleX(-1);
    height:100vh;
    filter: FlipH;
    background-image: url('https://cdn.glitch.com/604ccd24-6c39-4492-b5ee-72a22eb071c0%2Fcomp.jpg');
    background-size: cover;
    background-position: -8400px 0px;
    animation: trought_right 120s infinite linear;
}

.split_left{
    height:100vh;
    transform-origin:center left;
    background-image: url('https://cdn.glitch.com/604ccd24-6c39-4492-b5ee-72a22eb071c0%2Fcomp.jpg');
    background-size: cover;
    background-position: 8000px 0px;
    animation: trought_left 120s infinite linear;
}

@keyframes trought_right{
    100%{
        background-position: 8400px 0;
    }
}

@keyframes trought_left{
    0%{
        background-position:-8000px 0;
    }
}

根据我的测试，它可以正常工作：

• 在Chrome和IE11的PC（Windows 7）上
• 在Safari中的iPhone上
• 在Safari，Firefox和Firefox Focus中的iPad上
• 在Chrome和Samsung Internet中的android上。

但是在PC上的Firefox 80，Android上的Firefox和android上的Firefox Focus中，动画不会移动，或者，如果/当它移动时，动画会意外地移动几秒钟，然后停止。有人知道为什么吗？ @keyframes is unsupported in scoped stylesheets in Firefox说：“我可以使用”，但是代码笔不使用范围化的样式表。在PC上的一个特点是，经过最初的延迟后，如果我在其上方滚动codepen HTML，CSS或JS面板，动画确实会在Firefox 80中移动。另一个特点是，在iOS上，动画可以在Firefox中运行。