Лагает CSS анимация, передаваемая через JS

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
var blur = document.getElementsByClassName("wallpeper_blur");
var body = document.getElementsByClassName("modal-content");
 
btn.onclick = function() {
    modal.className = "modal";
    modal.style.display = "block";
}
 
span.onclick = function() { 
    modal.className = "modal1";
    setTimeout(function(){ modal.className = "myModal1";},560);
    setTimeout(function(){ modal.style.display = "none" ;},560);
    /*modal.style.display = "none";*/
}
 
window.onclick = function(event) {
    if (event.target == modal) {
        span.className = "closeAnim";
        setTimeout(function(){ span.className = "close";},560);
    }
}
 
//Изменение состояния фона страницы, после открытия модального окна.
 
$('.myBtn').click(function() {
    $('.wallpeper_blur').css('filter', 'blur(3px)');
});
 
//Изменение состояния фона страницы, после закрытия модального окна.
 
$('.close').click(function() {
    $('.wallpeper_blur').css('filter', 'blur(0px)');
});

$('.myBtn').click(function() {
    $('.wallpeper_blur').css('filter', 'blur(3px)');
});
 
$('.close').click(function() {
    $('.wallpeper_blur').css('filter', 'blur(0px)');
});