CSS3キーフレームアニメーションがFirefoxで動作しない - css、css3、firefox、css-animations

これが私のCSS3アニメーションからの抜粋です。 Chrome、IE 10では動作しますが、FFでは動作しません。 私はここで何が恋しいですか？

フィドル

http://jsfiddle.net/3k9VJ/

HTML

<div>
<div class="pic u1"></div>
<div class="pic u2"></div>
<div class="pic u3"></div>
</div>

CSS

@-webkit-keyframes scrollem {
0% {
background-position-x: 0px;
}

100% {
background-position-x: -2000000px;
}
}

@-moz-keyframes scrollem {
0% {
background-position-x: 0px;
}

100% {
background-position-x: -2000000px;
}
}

@-ms-keyframes scrollem {
0% {
background-position-x: 0px;
}

100% {
background-position-x: -2000000px;
}
}

@keyframes scrollem {
0% {
background-position-x: 0px;
}

100% {
background-position-x: -2000000px;
}
}


.pic {
width:100%;
height:400px;
position:absolute;
background-repeat: repeat-x;
background-size: cover !important;
-webkit-animation-timing-function: linear;
-webkit-animation-name: scrollem;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;

-moz-animation-timing-function: linear;
-moz-animation-name: scrollem;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;

-ms-animation-timing-function: linear;
-ms-animation-name: scrollem;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: normal;

animation-timing-function: linear;
animation-name: scrollem;
animation-iteration-count: infinite;
animation-direction: normal;



}
.u1 {
background: transparent url("http://i.telegraph.co.uk/multimedia/archive/02387/ufo_2387810b.jpg");
-webkit-animation-duration: 100000s;
-moz-animation-duration: 100000s;
-ms-animation-duration: 100000s;
animation-duration: 100000s;
}
.u2 {
top:100px;
background: transparent url("http://www.techi.com/wp-content/uploads/2012/11/UFO-4.jpg");
-webkit-animation-duration: 200000s;
-moz-animation-duration: 200000s;
-ms-animation-duration: 200000s;
animation-duration: 200000s;
}
.u3 {
top:200px;
background: transparent url("http://www.blisstree.com/wp-content/uploads/2013/07/UFO-EARTHLINGS.jpg") ;
-webkit-animation-duration: 300000s;
-moz-animation-duration: 300000s;
-ms-animation-duration: 300000s;
animation-duration: 300000s;
}

回答：

Firefoxはサポートしていません background-position-x または background-position-yこれが、このブラウザで単一の背景軸をアニメートできない理由です。

残念ながら、Firefoxはサポートしていません background-position-x または background-position-y。あなたが使用する必要があります background-position 代わりに速記：

@-moz-keyframes scrollem {
0% {
background-position: 0px 0px;
}

100% {
background-position: -2000000px 0px;
}
}

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

100% {
background-position: -2000000px 0px;
}
}

また、Firefoxとは無関係ですが、あなたはすべての痕跡を削除する必要があります -ms- これはIEの安定版では使用されていないため、アニメーションの頭に入れてください。