アニメーションリニアCSSの背景は、Firefoxで動作していません

Question

これはすでにどこかで答えられているが、何が間違っているか把握することはできません。 バックグラウンドではリピートリニアグラデーション、アニメーションでは@webkit-keyframesと@keyframesを使用しました。それはGoogle Chromeで動作しますが、Firefoxでは動作しません。誰かが助けてもらえ

HTML

<div class="menu_block"></div> 

CSS

.menu_block { 
    height:100px; width:500px; 
    background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px); 
    background-size:56px 56px; 
    background-position-x:0%; 
    -webkit-animation:'slide' 30s infinite linear forwards; 
    } 
    @-webkit-keyframes 'slide' { 
    0%{background-position-x:0%;} 
    100% { background-position-x:100%;} 
} 
@keyframes 'slide' { 
0%{ background-position-x:0%; } 
100% { background-position-x:100%;} 
} 

jsfiddleはここ

https://jsfiddle.net/mathews8881/0cj3L6wu/

です。

Answer 1

を使用しているとき、あなたのアニメーションでforwardsを使用する必要は両方がbackground-position: 0% 0;をparamsはアニメーションしてみません。また、接頭辞なしのanimationルールもありません。

.menu_block { 
 
    height: 100px; 
 
    width: 500px; 
 
    background: repeating-linear-gradient(45deg, #000, #000 20px, #fff 20px, #fff 40px); 
 
    background-size: 56px 56px; 
 
    background-position: 0 0; 
 
    -webkit-animation: slide 30s infinite linear forwards; 
 
    animation: slide 30s infinite linear forwards; 
 
} 
 
@keyframes slide { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: 100% 0; 
 
    } 
 
} 
 
@-webkit-keyframes slide { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: 100% 0; 
 
    } 
 
}

<div class="menu_block"> 
 

 
</div>

Answer 2

（コメントで述べたように、background-position-xがブラウザでサポートされていません）、animation/keyframesプロパティ値に単一引用符を削除animation上-webkit-プレフィックスとbackground-position: 0%;の代わりbackground-position-x:0%;を使用しています。

接頭辞付きのプロパティーが一貫して適用されなかったため、すべて削除しました。したがって、それらを必要とする古いバージョンのブラウザに戻す必要があります。また、あなたのケースでは、infinite

.menu_block { 
 
    height:100px; width:500px; 
 
    background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px); 
 
    background-size:56px 56px; 
 
    background-position:0%; 
 
    animation: slide 30s infinite linear; 
 
} 
 
@keyframes slide { 
 
    0%{ \t background-position:0%; \t } 
 
    100% { \t background-position:100%;} 
 
}

<div class="menu_block"> \t \t 
 
</div>