CSS-Animation works in Chrome and Safari, but not Firefox and IE

Question

i use an animation shown on my page. It works for Chrome and Safari (webkit-Browser) but not for Firefox (moz) and also not for Internet Explorer. I don't know why, but here is my code:

#Area {
   -webkit-animation: WriteText 2s;
   -moz-animation: WriteText 2s;
   animation: WriteText 2s;
}

@-webkit-keyframes WriteText {
   0%   { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; }
   5%   { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1;  }
........
   100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; }
}

@-moz-keyframes WriteText {
   0%   { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; }
   5%   { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1;  }
........
   100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; }
}

@keyframes WriteText {
   0%   { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; }
   5%   { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1;  }
........
   100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; }
}

Other things out of CSS works fine in every Browser, the Content of the Browser-Specific Sections is the same for the animation so i don't know why it doesn't work.

I already tried to write it like this:

#Area {
   -webkit-animation-name: WriteText;
   -webkit-animation-duration: 2s;
   -moz-animation-name: WriteText;
   -moz-animation-duration: 2s;
   animation-name: WriteText;
   animation-duration: 2s;
}

but it doesn't help me.

Could you create a fiddle with working images please, keyframe animations only work for > ie9 — Huangism, Nov 20 '13 at 21:32
at: http://manuelweitzel.de/ you can see the animation - it works in Chrome and Safari. The error codes are for another function and have nothing to do with the animation — Manuel Weitzel, Nov 20 '13 at 21:45
It works for Chrome, Safari and Opera - but not Firefox and IE - anyone got an idea? — Manuel Weitzel, Nov 21 '13 at 12:31

Scott Blinch · Answer 1 · 2013-11-22T14:19:38.687

0

Looking at the CSS file at the link you provided, you are missing semicolons after -moz-animation-name and -moz-animation-duration:

#NavigationArea .ImgAni {
position: relative;
width: 1000px;
height: 263px;
background: #E0FFFF url('../media/header/header.jpg');
opacity: 1;
background-size: 1000px 263px;
-webkit-animation-name:WriteText;
-webkit-animation-delay: 1s;
-webkit-animation-duration: 3s;
-moz-animation-name: WriteText /* missing semicolon here */
-moz-animation-delay:  1s;
-moz-animation-duration: 3s /* missing semicolon here */
animation-name:WriteText;
animation-delay: 1s;
animation-duration: 3s;
}

This is causing non-Webkit browsers to not pick up the animation name. Try adding those semicolons in and report back. Or you could just remove those moz-prefixed animation lines altogether as those are the only ones missing semicolons and Firefox doesn't even use them. Just -webkit-animation and animation should do.

edited Nov 22 '13 at 14:19

answered Nov 22 '13 at 13:57

Scott Blinch

51
5

Thanks for your answer - I added the semicolons, but it still doesn't work. any other idea? First i leaved the moz-aimation things out of it but doesn't work too – Manuel Weitzel Nov 22 '13 at 14:12
like i told it doesn't work without the moz-prefixed animation lines and it doesn't work with the semicolons. - But the "moz-linear-gradient" - lines are working - und if i remove this moz-linear-gradient line it doesn't work too, so it seems that Firefox use not the webkit things, but the moz-prefixes – Manuel Weitzel Nov 22 '13 at 14:24
Firefox uses -moz prefixes on certain CSS rules, but it only uses the unprefixed animation rules. Anyway, I did a little digging and [this](http://stackoverflow.com/a/7319497/2347212) says that background-image can't be tweened as per the spec, and that only webkit browsers have that ability. You could try what he suggested and have all those images stacked on top of each other and animate with opacity, or you may want to go the jquery route. – Scott Blinch Nov 22 '13 at 14:54
Here's a [jsfiddle](http://jsfiddle.net/srd76/48/) that animates background image using jquery. You'll have to do some heavy tweaking to make it work for you (it was originally used to crossfade images, not switch images instantaneously), but it could be a good start if you decide to go with jquery. – Scott Blinch Nov 22 '13 at 15:05

CSS-Animation works in Chrome and Safari, but not Firefox and IE

1 Answers1