Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Animation support within firefox and IE?

CSS Animation support within firefox and IE?

Problem

I have CSS animates on my navigation bar when the user hovers over them.

The issue is that they all only work within Chrome. They all have the correct extensions yet nothing happens?

An example of ONE button:

#WhatsWhatButton:hover
{
-webkit-animation-name: sway;
-webkit-animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
-moz-animation-name: sway;
-moz-animation-duration: 1.5s;
-moz-animation-fill-mode: both;
-ms-animation-name: sway;
-ms-animation-duration: 1.5s;
-ms-animation-fill-mode: both;
-o-animation-name: sway;
-o-animation-duration: 1.5s;
-o-animation-fill-mode: both;
animation-name: sway;
animation-duration: 1s;
animation-fill-mode: both;
} 

@-webkit-keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

@-moz-keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

@-ms-keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

@-o-keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

@keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

As you can see, all the keyframes have their extensions as well as initiated it from within #WhatsWhatsButton:hover

Yet it still doesn't animate within IE or Firefox.

For record, i'm running the latest Firefox (V22.0) and IE 10

Problem courtesy of: Matt Meadows

Solution

Firefox and IE10 both support CSS Animations (now even unprefixed, so there is no real need to use -ms- prefix for animations because there is no shipped IE version that need them, and -moz- is probably also safe to remove because Firefox hasn't needed a prefix since version 16). But 'background-image' property is marked in the spec as 'not animatable'. That's why most browsers can't animate (cross-fade) them via CSS, only Chrome has this non-standard feature. Some more info on the topic: CSS3 transition of background-image for Firefox not working

As a workaround, I'd suggest to create 2 layers of background (e.g. element and pseudo-element) and animate the opacity of the top layer.

Solution courtesy of: Ilya Streltsyn

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Animation support within firefox and IE?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×