سلام و وقت بخیر

من میخوام که انیمیشن من برای یک ثانیه انجام شود و بعد یک ثانیه متوقف گردد و سپس ادامه یاید اما call stack پر میشود .

   <h3 class="text-center" id="new-product">محصولات جدیدh3>
@keyframes shake {
    0%{transform: rotate(0);}
    10%{transform: rotate(10deg);}
    30%{transform: rotate(-10deg);}
    50%{transform: rotate(10deg);}
    70%{transform: rotate(-10deg);}
    90%{transform: rotate(10deg);}
    100%{transform: rotate(-10deg);}
}
let title = document.querySelector('#new-product');
let d;
console.log(title);
function shake(){
    clearTimeout(d);
     d = setTimeout(function(){
       
        title.style.animation = 'shake 0.4s ease 1 backwards';
       
    } , 1000);
    shake();
}
shake();