html - 我的Css3动画无法在mozilla上运行

我尝试添加-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;
}

最佳答案

将这个用于@ -moz-keyframes

@-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

关于html - 我的Css3动画无法在mozilla上运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27097929/