CODEWITHSUNDEEP
csscss-animations
codeplay
codeplay

Reputation: 610

How to animate blur filter in Firefox?

@-webkit-keyframes myBlur{
   from{
      -webkit-filter:blur(0px);
   }
   to{
      -webkit-filter:blur(10px);
   }
}

It seems "blur" is not implemented in Firefox and we could use svg filter instead. Is it possible to animate svg filter to achieve the same as above code?

Upvotes: 3

Views: 5402

Answers (4)

commonpike
commonpike

Reputation: 11185

I got my firefox blurring here

http://demosthenes.info/blog/534/Crossbrowser-Image-Blur

the SVG blur works .. you might try an SVG animation ?

*-pike

Upvotes: 1

rollsappletree
rollsappletree

Reputation: 630

ATM you cant.

I tried in all the way, but animating (as with @keyframe or via transition) does not work neither with Aurora build.

Looking forward for it

Upvotes: 2

Mark
Mark

Reputation: 5720

Is this what you are looking for?

https://developer.mozilla.org/en-US/docs/CSS/filter

You are using a webkit prefix which is for webkit browsers. I know a while back Mozilla announced they would support webkit prefixes but I don't know if this is one of them since its experimental.

// Browser Specific
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

Upvotes: 0

Alpesh Shah
Alpesh Shah

Reputation: 123

Try Foggy and then loop through and change the blurRadius and Opacity.

http://nbartlomiej.github.com/foggy/

Upvotes: 0

Related Questions