CSS动画在Mozilla中无法使用，但可在Chrome中使用。解决方案？

Question

请看看我的代码

HTML：

`<div id="animated-example" class="animated swing"><div class="navbar"></div></div>` 

的CSS：

.animated { 

    color: #9f9f9f; 

    min-height: 300px; 

    width: 100%; 

    padding-bottom: 24px; 

    background: #000000 url(../images/icons.svg) repeat center; 

    -webkit-animation-timing-function: linear; 
    -moz-animation-timing-function: linear; 
    -o-animation-timing-function: linear; 
    animation-timing-function: linear; 

    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 

    -webkit-animation-duration:15s; 

    -moz-animation-duration:15s; 

    -o-animation-duration:15s; 

    animation-duration:15s;} 

.navbar { 

    position: absolute; 
    min-height: 300px; 
    width: 100%; 
    padding-top: 24px; 
    background-image: -o-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%); 
    background-image: -moz-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%); 
    background-image: -ms-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%); 
    background-image: linear-gradient(-179deg, #000000 0%, rgba(0,0,0,0.00) 100%); 
} 

@-webkit-keyframes swing { 

    0% { 
     background-position-y:511px 
     } 
    100% { 
     background-position-y:0 
     } 
} 

@-moz-keyframes swing { 

    0% { 
     background-position-y:511px 
     } 
    100% { 
     background-position-y:0 
     } 
} 

@-o-keyframes swing { 

    0% { 
     background-position-y:511px 
     } 
    100% { 
     background-position-y:0 
     } 
} 

@keyframes swing { 

    0% { 
     background-position-y:511px 
     } 
    100% { 
     background-position-y:0 
     } 
} 

.swing { 

    -webkit-transform-origin: center; 
    transform-origin: center; 
    -webkit-animation-name: swing; 
    animation-name: swing; 
} 

的问题是，动画不工作在Firefox，但Chrome和其他浏览器

请看下面的视频，它说

http://sendvid.com/b1r3hofg

Answer 1

如何：

.swing { 
    -webkit-transform-origin: center; 
    -moz-transform-origin: center; 
    transform-origin: center; 
-webkit-animation-name: swing; 
-moz-animation-name: swing; 
animation-name: swing; 
    } 

如果这不起作用，而这可能是另一个代码的问题，你可能已经知道这一点，我只是提到一些CSS属性（尤其是过渡）是依赖于浏览器的（这意味着它们只能用于某些浏览器）......尽管你所做的事似乎应该起作用。

无论如何，祝你好运！ :)

Answer 2

我固定它：

@keyframes摆动{

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

}