CSSアニメーションは、クロームで動作しますが、Firefoxの

Question

に

CSSアニメーションは、クロム、エッジとサファリではなくfirefox.Hereで完璧に動作していない私のコード

@-webkit-keyframes roll1 { 
    0% { transform: translate(2px, 1px) rotate(0deg); } 
    10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 
    20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 
    30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 
    40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 
    50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 
    60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 
    70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 
    80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 
    90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 
    100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } 
} 

    #roll1:hover, 
    #roll1:focus { 
    -moz-animation-name: roll1; 
    -moz-animation-duration: 0.8s; 
    -moz-transform-origin:50% 50%; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: ease; 
    } 

と私のHTMLコードです。

<div id="roll"> 
      <button type="button" name="next" id="roll1" class="btn btn-primary rollbutton" onclick="displayQuestion();">Roll Dice</button> 
     </div> 

Answer 1

@-webkit-keyframes削除特別クロムについて、あなたは、単に@keyframes

を使用する必要がありますまた、あなたが-mozプレフィックスMozillaを必要としない生transformプロパティをサポートしていない

@keyframes roll1 { 
 
    0% { 
 
    transform: translate(2px, 1px) rotate(0deg); 
 
    } 
 
    10% { 
 
    transform: translate(-1px, -2px) rotate(-1deg); 
 
    } 
 
    20% { 
 
    transform: translate(-3px, 0px) rotate(1deg); 
 
    } 
 
    30% { 
 
    transform: translate(0px, 2px) rotate(0deg); 
 
    } 
 
    40% { 
 
    transform: translate(1px, -1px) rotate(1deg); 
 
    } 
 
    50% { 
 
    transform: translate(-1px, 2px) rotate(-1deg); 
 
    } 
 
    60% { 
 
    transform: translate(-3px, 1px) rotate(0deg); 
 
    } 
 
    70% { 
 
    transform: translate(2px, 1px) rotate(-1deg); 
 
    } 
 
    80% { 
 
    transform: translate(-1px, -1px) rotate(1deg); 
 
    } 
 
    90% { 
 
    transform: translate(2px, 2px) rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: translate(1px, -2px) rotate(-1deg); 
 
    } 
 
} 
 
#roll1:hover, 
 
#roll1:focus { 
 
    -moz-animation-name: roll1; 
 
    -moz-animation-duration: 0.8s; 
 
    -moz-transform-origin: 50% 50%; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-animation-timing-function: ease; 
 
}

<div id="roll"> 
 
    <button type="button" name="next" id="roll1" class="btn btn-primary rollbutton" onclick="displayQuestion();">Roll Dice</button> 
 
</div>

Answer 2

ですすべてのモザイクライン。 @keyframeアニメーションはfirefoxによって直接サポートされています！

thisリンクを参照してください。

Answer 3

これは、私が追加したFirefoxブラウザのみをサポートする-moz-を使用したためです。これはchromに使用されています。すべてのブラウザサポートで-o- -ms-と同じように使用されます。

@-webkit-keyframes roll1 { 
 
    0% { transform: translate(2px, 1px) rotate(0deg); 
 
    
 
    } 
 
    10% { 
 
     -moz-transform: translate(-1px, -2px) rotate(-1deg); 
 
     -webkit-transform: translate(-1px, -2px) rotate(-1deg); 
 
     transform: translate(-1px, -2px) rotate(-1deg); 
 
    
 
    } 
 
    20% { 
 
     -moz-transform: translate(-3px, 0px) rotate(1deg); 
 
     -webkit-transform: translate(-3px, 0px) rotate(1deg); 
 
     transform: translate(-3px, 0px) rotate(1deg); 
 
    } 
 
    30% { 
 
     -moz-transform: translate(0px, 2px) rotate(0deg); 
 
     -webkit-transform: translate(0px, 2px) rotate(0deg); 
 
     transform: translate(0px, 2px) rotate(0deg); 
 
    } 
 
    40% { 
 
     -moz-transform: translate(1px, -1px) rotate(1deg); 
 
     -webkit-transform: translate(1px, -1px) rotate(1deg); 
 
     transform: translate(1px, -1px) rotate(1deg); 
 
    
 
    } 
 
    50% { 
 
     -moz-transform: translate(-1px, 2px) rotate(-1deg); 
 
     -webkit-transform: translate(-1px, 2px) rotate(-1deg); 
 
     transform: translate(-1px, 2px) rotate(-1deg); 
 
    } 
 
    60% { -moz-transform: translate(-3px, 1px) rotate(0deg); 
 
     -webkit-transform: translate(-3px, 1px) rotate(0deg); 
 
     transform: translate(-3px, 1px) rotate(0deg); 
 
    } 
 
    70% { -moz-transform: translate(2px, 1px) rotate(-1deg); 
 
\t \t -webkit-transform: translate(2px, 1px) rotate(-1deg); 
 
\t \t transform: translate(2px, 1px) rotate(-1deg); 
 
\t } 
 
\t 80% { 
 
\t \t -moz-transform: translate(-1px, -1px) rotate(1deg); 
 
\t \t -webkit-transform: translate(-1px, -1px) rotate(1deg); 
 
\t \t transform: translate(-1px, -1px) rotate(1deg); 
 
\t } 
 
    90% { 
 
\t \t -moz-transform: translate(2px, 2px) rotate(0deg); 
 
\t \t -webkit-transform: translate(2px, 2px) rotate(0deg); 
 
\t \t transform: translate(2px, 2px) rotate(0deg); 
 
\t } 
 
    100% { 
 
\t \t -moz-transform: translate(1px, -2px) rotate(-1deg); 
 
\t \t -webkit-transform: translate(1px, -2px) rotate(-1deg); 
 
\t \t transform: translate(1px, -2px) rotate(-1deg); 
 
\t } 
 
} 
 

 
    #roll1:hover, 
 
    #roll1:focus { 
 
    -moz-animation-name: roll1; 
 
    -moz-animation-duration: 0.8s; 
 
    -moz-transform-origin:50% 50%; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-animation-timing-function: ease; 
 
     
 
    -webkit-animation-name: roll1; 
 
    -webkit-animation-duration: 0.8s; 
 
    -webkit-transform-origin:50% 50%; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: ease; 
 
     
 
    animation-name: roll1; 
 
    animation-duration: 0.8s; 
 
    transform-origin:50% 50%; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease; 
 
    }

<div id="roll"> 
 
       <button type="button" name="next" id="roll1" class="btn btn-primary rollbutton" onclick="displayQuestion();">Roll Dice</button> 
 
    </div>