0

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

user3269765
  • 3
  • 1
  • What kind of animation are we suppose to see? The fiddle looks rather static to me in both Chrome and Mozilla.Also, not all the vendor-prefixed css is the same. For instance, `-webkit-keyframes` starts with `opacity:1` and `-moz-keyframes` starts with `opacity:0`. By the way, you really shouldn't put all the HTML and the CSS together in the CSS box. – Mr Lister Feb 04 '14 at 08:07

1 Answers1

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.

Community
  • 1
  • 1
Adrian Enriquez
  • 8,175
  • 7
  • 45
  • 64