Geek Answers Handbook

Why doesn't -moz animation work?

The following CSS works fine in Webkit. I have not tested it in Opera, but I know that it does not work in Firefox. Can someone tell me why?

The right classes definitely apply to my HTML (checked with Firebug, and I see the -moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot property -moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot on .arrow ).

This also doesn't work in IE9, although initially I had -ms-animation:... and -ms-transform:... I thought it should work in IE9, but when it is not, I just assumed that IE did not support them yet. However, now that it doesn’t work in Firefox, something else may be happening.

 .page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.dot .dvd .arrow { -webkit-animation: arrowRotateDot 500ms forwards; -moz-animation: arrowRotateDot 500ms forwards; -o-animation: arrowRotateDot 500ms forwards; animation: arrowRotateDot 500ms forwards; } .page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.f2 .dvd .arrow { -webkit-animation: arrowRotateF2 500ms forwards; -moz-animation: arrowRotateF2 500ms forwards; -o-animation: arrowRotateF2 500ms forwards; animation: arrowRotateF2 500ms forwards; } @-webkit-keyframes arrowRotateDot { 100% { left:-18px; top:182px; -moz-transform: scale(1) rotate(-30deg); -webkit-transform: scale(1) rotate(-30deg); -o-transform: scale(1) rotate(-30deg); transform: scale(1) rotate(-30deg); } } @-webkit-keyframes arrowRotateF2 { 0% { left:-18px; top:182px; -moz-transform: scale(1) rotate(-30deg); -webkit-transform: scale(1) rotate(-30deg); -o-transform: scale(1) rotate(-30deg); transform: scale(1) rotate(-30deg); } 100% { left:115px; top:257px; -moz-transform: scale(1) rotate(-90deg); -webkit-transform: scale(1) rotate(-90deg); -o-transform: scale(1) rotate(-90deg); transform: scale(1) rotate(-90deg); } }
+4
source share
2 answers

Your animation does not work in Firefox because you use @ - webkit -keyframes, which applies only to Webkit browsers, i.e. Chrome and Safari. A (somewhat) cross-browser way to create animated keyframes:

 @keyframes animationName { /* animation rules */ } @-moz-keyframes animationName { /* -moz-animation rules */ } @-webkit-keyframes animationName { /* -webkit-animation rules */ }

Opera and Internet Explorer do not currently support the @keyframes rule.

+9
source

Skyline is correct. Firefox does not support this, so you will need additional code to get the same or similar effect if they exist without webkit.

In addition, here is some additional information that can help you with your code or help you decide where to go from this point with your code if adding additional code is not an option (I ended up changing the way the code is overloaded with code):

http://caniuse.com/#

http://www.quirksmode.org/webkit.html

0
source

More articles:


All Articles