CSS animation does not work on Firefox and IE

Question

I got this code running perfectly on Chrome and Safari, but it does not work on FF and IE, I tried to solve this problem for couple of hours but still not a clue.

@-moz-keyframes imageAnimation { 
0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
}
8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
}
17% {
    opacity: 1;
    -moz-transform: scale(1.1) rotate(3deg);
}
25% {
    opacity: 0;
    -moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }

} Here is the full code

Answer 1

I saw the css you made. If you are using

@-o-keyframes imageAnimation

change your

-webkit-animation-timing-function

to

-o-animation-timing-function

notice the prefixes. do the same to other keyframes you made.

Please check http://caniuse.com/css-animation for browser compatibility. Also check CSS Keyframe animations for all browsers? for better and simpler syntax.