анимация ключевого кадра CSS3 не работает в Firefox

Question

Вот небольшая выдержка из моей анимации CSS3. Работает в Chrome, IE10, но не в FF. Что я пропустил?

FIDDLE

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;  
} 

Answer 1

Firefox не поддерживает background-position-x или background-position-y, поэтому вы не можете анимировать одной оси фона на этом браузер.

Answer 2

К сожалению, 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.