CSS立方体动画在Firefox中不起作用

Question

我正在尝试使用CSS中的多维数据集创建动画。 动画完全适用于Chrome，但不适用于Firefox。 一旦立方体离开视口，动画就会冻结。 但是，如果我在动画期间移动鼠标，则会运行动画。 这是代码（注意：点击面4时动画启动）：

 if (vw_d==vw_q):
    if dst<=th:
        cnd= not cnd
        print vw_d,vw_q,dst
matched_index[j]=cnd 

//Retrieve elements
var leftArrow = document.getElementById("leftArrow");
var rightArrow = document.getElementById("rightArrow");
var frontFace = document.getElementById("face4");
var cube = document.getElementById("cube");


function rotateLeft()
{
    cube.style.transform = "rotateY(180deg) translateX(-150px)";
    cube.style.transition = 'transform 0.5s ease-out';
}


function rotateRight()
{
    cube.style.transform = "rotateY(0deg) translateX(-150px)";
    cube.style.transition = 'transform 0.5s ease-out';
}

function face4Click()
{
    cube.style.animation = "face4Anim 7s ease-out";
    document.getElementById('body').style.animation = 'fadeOut 2s linear 6s';
    launchpage();
}

function face1Click()
{
    console.log("face 1");
}

function launchpage()
{
    setTimeout(function () {
        document.location.href = 'index.html';
    }, 8000);
}

/* Reset margins/paddings */
*
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: 'moon get!';
    font-size: 1.4em;
    color: white;
    background-color: black;
}

header, #content
{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

footer
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 8em;
}

h1
{
    margin-top: 2em;
}

#content
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#leftArrow, #rightArrow
{
    margin-top: 10em;
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

#leftArrow
{
    border-right:100px solid blue;
}

#rightArrow
{
    border-left:100px solid blue;
}

#cube
{
    transform-style: preserve-3d;
    transform-origin: center center;
    transform: translateX(-150px);
    animation: rotation 2s ease-out;
    position: absolute;
    margin-top: 8em;
}

#cube div
{
    border: 1px solid grey;
    position: absolute;
    width: 300px;
    height: 300px;
    background: linear-gradient(red, yellow);
}

#face1
{
    transform: rotateY(180deg);
}

#face2
{
    z-index: 2;
    transform-origin: center left;
    transform: translateX(300px) rotateY(-90deg);
}

#face3
{
    z-index: 2;
    transform-origin: center right;
    transform: translateX(-300px) rotateY(90deg);
}

#face4
{
    z-index: 3;
    transform: translateZ(300px);
}

#face5
{
    z-index: 2;
    transform-origin: center top;
    transform: translateY(300px) rotateX(90deg) rotateY(180deg);
}

#face6
{
    z-index: 2;
    transform-origin: center bottom;
    transform: translateY(-300px) rotateX(-90deg);
}


@keyframes translation
{
    from{transform: translateY(-700px) translateX(-150px)}
    to{transform: rotate(0) translateX(-150deg) translateY(0)}
}

@keyframes rotation
{
    from{transform: rotateX(45deg) rotateY(180deg) translateY(-1300px)translateX(-150px)}
to{transform: rotate(0) translateX(-150deg) translateY(0)}
}

@keyframes fadeOut
{
    from{opacity: 1}
    to{opacity: 0}
}

@keyframes face4Anim
{
    from{transform: rotateY(0deg) translateX(-150px)}
    to{transform: rotateX(90deg) rotateY(180deg) translateZ(-800px) translateX(-750px) scaleX(5) scaleY(5) scaleZ(5)}
}

有人可以帮助我吗？