CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jon Mateo
Jon Mateo

Reputation: 384

my Css3 animation not working on mozilla

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 :(

here is the code

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

and the css code :

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

Upvotes: 0

Views: 3044

Answers (2)

tsepehr
tsepehr

Reputation: 147

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

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

Upvotes: 1

ryanpither
ryanpither

Reputation: 466

As per http://caniuse.com/#feat=css-animation:

@keyframes not supported in an inline or scoped stylesheet in Firefox (bug 830056)

Are you using it in an inline or scoped way? If so, there's your answer.

Upvotes: 1

Related Questions