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

try this simple solution:

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function applyBlurFilter() {
    for (var i = 1 ; i <= 100; i++) {
        $('h1').css({ "filter": "blur(" + i/10 + "px)" });
        await sleep(40); //4 seconds (40 * 100 / 10)
    }
}

$(document).ready(function(){
  applyBlurFilter();
});

  This Text is going to be blured.