我的CSS3动画不工作在Mozilla(my Css3 animation not working

我尝试添加-moz-但它不挥手..它适用于Chrome而不是在Mozilla Firefox我不知道什么是错用它..和帮助，将不胜感激。我犯规动画在Mozilla Firefox :(

这里是代码

 <ul class="notes-dance">
<li>&#9833;</li>
<li>&#9834;</li>
<li>&#9835;</li>
<li>&#9834;</li>
<li>&#9835;</li>
<li>&#9836;</li>
<li>&#9833;</li>
<li>&#9835;</li>
<li>&#9836;</li>
<li>&#9833;</li>
</ul>

和CSS代码：

ul li {
    display: block;
    float: left;
    font-size: 2em;
    color: #ccc;
    text-shadow: 0 -1px 0 white, 0 1px 0 black;
}
.anim {
  -moz-animation: music 1s ease-in-out both infinite;
    -webkit-animation: music 1s ease-in-out both infinite;
  animation : music 1s ease-in-out both infinite;

}

@-webkit-keyframes music {
    0%,100% {
    -moz-transform: translate3d(0,-10px,0);
        -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
    }
    50% {
    -moz-transform: translate3d(0,10px,0);
        -webkit-transform: translate3d(0,10px,0);
      transform: translate3d(0,10px,0);
    }
}

@-moz-keyframes music {
    0%,100% {

    transform: translate3d(0,-10px,0);
    }
    50% {

      transform: translate3d(0,10px,0);
    }
}


.notes-dance{
  left: 30%;
    right: 50px;
    top: 90%;
    position: absolute;
}

Answer 1:

使用这一个@ -moz-关键帧

@-moz-keyframes music {
    0% {-moz-transform: translate3d(0,-10px,0);}
    50% {-moz-transform: translate3d(0,10px,0);}
    100% {-moz-transform: translate3d(0,-10px,0);}
}

您添加@-moz-keyframes ，没有-moz-transform ！你添加-moz-transform到@-webkit-keyframes

Answer 2:

按http://caniuse.com/#feat=css-animation ：