my Css3 animation not working on mozilla

Question

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

Works for me http://jsfiddle.net/GCu2D/426/ . Are you sure you added the class 'anim' to ul? — K K, Nov 24 '14 at 04:48
Yes, it works for me too. Also, this is not related to Twitter-Bootstrap — Christina, Nov 24 '14 at 04:50
Works fine in Firefox 33.1. Only the `webkit` prefix is required [Firefox has native support for CSS animation](http://caniuse.com/#feat=css-animation) going back a long time. — misterManSam, Nov 24 '14 at 04:59
the animation is not showing when I inspect element mozilla firefox but it there is animation in google — Jon, Nov 24 '14 at 06:02

score 1 · Answer 1 · answered Nov 24 '14 at 04:46

1

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.

answered Nov 24 '14 at 04:46

ryanpither

426
4
4

I'm using scoped way sir – Jon Nov 24 '14 at 05:59
Then the animation won't work. inline or scoped stylesheets don't work with @keyframes in Firefox. If you can switch to a global stylesheet it could work? – ryanpither Nov 24 '14 at 06:25

score 1 · Accepted Answer · answered Nov 24 '14 at 07:08

1

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

answered Nov 24 '14 at 07:08

tsepehr

147
1
5
13

1

Firefox has supported transform without the -moz- prefix since version 16, it isn't needed anymore http://caniuse.com/#feat=transforms2d – ryanpither Nov 24 '14 at 07:40

my Css3 animation not working on mozilla

2 Answers2

Linked