CSS3 blur animation - css

Question

I am trying to get a cross browser compatible blur animation effect, although I appear to be failing miserably!
I am using the following:
.image-container img.animate-me {
-webkit-animation: focus 4s;
-moz-animation: focus 4s;
-ms-animation: focus 4s;
-o-animation: focus 4s;
animation: focus 4s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes focus {
from {
filter: url('blur.svg#blur');
filter: progid:DXImageTransform.Microsoft.blur(PixelRadius='10');
filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
}
to {
filter: url('focus.svg#focus');
filter: none;
filter:progid:DXImageTransform.Microsoft.blur(PixelRadius='0');
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
}
#-webkit-keyframes focus {
from {
-webkit-filter: blur(10px);
}
to {
-webkit-filter: blur(0px);
}
}
#-moz-keyframes focus {
from {
filter: url('blur.svg#blur');
}
to {
filter: url('focus.svg#focus');
}
}
Now there are a number of things which must be pointed out.
The prefixes thing has just got messy, in fact I have no idea what half of the first #keyframes rule is doing now! Anyone care to tell me which rules are irrelevant or useless?
Chrome (and the whole #-webkit-keyframes rule) works perfectly... Good old, no-nonsense, Microsoft-less Chrome. We never doubted it for a second!
Internet Explorer is as usual playing dumb and acting like it has never heard the phrase CSS3 in its life. I'd like this to work as far back as IE8 so I can't blame it, but I've been testing in IE10 and I expected to at least see some kind of reaction.
filter: url('blur.svg#blur'); is as follows:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</svg>
This blurs the image when added as a CSS rule, but appears to do nothing within a #keyframe animation. The focus version sets stdDeviation to 10.
Any help is appreciated!

Answer 1

Always put unprefixed versions last! Firefox supports unprefixed keyframes, but is going to use whichever you write last (in your case, the prefixed keyframes).
WebKit browsers are the only ones that currently support CSS filters (prefixed, of course).
Firefox only supports the SVG filter equivalents.
I haven't heard of -o-filter or -ms-filter ever working (though I have seen them in demos that were meant to be future-proof).
Old IE filters don't work in IE10. And keyframe animations don't work in other versions of IE but IE10. So IE filters (recognized only by IE versions older than 10, but not by IE10) inside keyframes (recognized only by IE10) are useless.
As far as I've played with this, I haven't found a way to make the SVG filter equivalents work with keyframe animations.
So as far as I know, you can only make such an animation work in WebKit.