我的Css3动画不工作在mozilla [英] my Css3 animation not working on mozilla

问题描述

我尝试添加-moz-但它不会波..它的工作原理chrome，但不是在mozilla firefox
我不知道什么错了它..和帮助将赞赏..我不会动画mozilla firefox :(

I tried adding -moz- but it doesnt wave.. it works on chrome but not on mozilla firefox I don't know whats wrong with it.. and help would be appreciated.. I doesnt animate on 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

Use This One for @-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

You added @-moz-keyframes with no -moz-transform !! and you added -moz-transform to @-webkit-keyframes

这篇关于我的Css3动画不工作在mozilla的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！