la mia animazione Css3 non funziona su Mozilla

Ho provato ad aggiungere -moz- ma non wave .. funziona su chrome ma non su mozilla firefox Non so cosa c’è di sbagliato in questo .. e l’aiuto sarebbe apprezzato .. Non mi anima su mozilla firefox 🙁

ecco il codice

e il codice 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; } 

Usa questo per @ -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);} } 

Hai aggiunto @-moz-keyframes senza -moz-transform !! e hai aggiunto -moz-transform a @-webkit-keyframes

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

@keyframes non supportato in un foglio di stile inline o con scope in Firefox (bug 830056)

Lo stai usando in un modo in linea o ad ambito? Se è così, c’è la tua risposta.