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

One Google Search query gave me this result you might wanna take a look at. What I suggest to do is only toggle a class in your JS and handle the rest in your CSS, for instance:

var $item = $('.item'); // or any selector you want to use
$item.addClass('item--blur');

Handle the rest in your CSS:

.item {
    transition: all 0.25s ease-out;
}
.item--blur {
    // all your filters
}