Animate blur filter

Question

Is it possible to animate the CSS3 blur filter using jQuery?

This works as a static way of applying CSS rules :

item.css({\'filter\': \'blur(\'+blur         


        

Answer 1

I tried Terry's answer, which worked great until I tried reversing the process to animate the removal of the blur effect. Instead of ending with a blur of 0, the process ended with a blur of 0.0815133px. Most browsers seemed to round this down to zero, but iOS didn't and left a noticeable blur on the page. Following the animated change by manually setting the blur to zero fixed this:

$('.item').css({
  "-webkit-filter": "blur(0)",
  "filter": "blur(0)"
});