FirefoxでCSS3のフリップとスピン機能が動作しない

Question

クリックでこの回転して反転するボタンを有効にしました。それはGoogle Chrome（とMicrosoft Edgeについては問題ありません）でもうまく動作しますが、Firefoxで起動して起動するとすぐに、このボタンをクリックすると小さなボタンが移動して戻ってきます。私はなぜなのか理解していない。

.spinner { 
     width: 120px; 
     height: 120px; 
     background: url('down.png'); 
     margin-left:auto; 
     margin-right:auto; 
     -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; 
     animation: sk-rotateplane 1.2s infinite ease-in-out; 
    } 

    @-webkit-keyframes sk-rotateplane { 
     0% { -webkit-transform: perspective(120px) } 
     50% { -webkit-transform: perspective(120px) rotateY(180deg) } 
     100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 
    } 

    @keyframes sk-rotateplane { 
     0% { 
     transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
     } 50% { 
     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 
     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
     } 100% { 
     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
     } 

    } 

EDIT：

は、ここに私のCSSだ、私は適切に問題を調査していませんでした。それは何らかの形で壊れてonClick jQueryのだ、それはあまりにも私のため..私のサイト上でのFirefoxで

<!-- HTML --> 
<button id="reload" onclick="return returnGame();clearDescr();"> 
</button> 

<!-- The .js file --> 
$("#theSpinner").removeClass("spinner"); 
$("#theSpinner").addClass("notspinning"); 

その他のjQuery

Answer 1

..同じファイルが動作しますから、その作品を動作しません。とにかくアニメーションのFFのバージョンを定義し、

-moz-animation: 

を追加

@-moz-keyframes sk-rotateplane { 

    } 

と

-moz-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 

.spinner { 
 
    width: 120px; 
 
    height: 120px; 
 
    background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'); 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; 
 
    animation: sk-rotateplane 1.2s infinite ease-in-out; 
 
} 
 
@-webkit-keyframes sk-rotateplane { 
 
    0% { 
 
    -webkit-transform: perspective(120px) 
 
    } 
 
    50% { 
 
    -webkit-transform: perspective(120px) rotateY(180deg) 
 
    } 
 
    100% { 
 
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) 
 
    } 
 
} 
 
@keyframes sk-rotateplane { 
 
    0% { 
 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
 
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
 
    } 
 
    50% { 
 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 
 
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
 
    } 
 
    100% { 
 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
 
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
 
    } 
 
}

<div class="spinner"> 
 

 
</div>

Answer 2

を変換どこでも

-moz-transform: 

古いFirefoxは-moz-