Javascriptで遅延アニメーションを実装したい。

jsで遅延アニメーションを実装したいと思っています。

各'item'に対して遅延でクラス'anime'を追加したいと思っております。
下記がJSのコードです。

const item = document.querySelectorAll('.item');

const contents = document.querySelector('.contents')

document.addEventListener('scroll', () => {
const targetElement = contents.getBoundingClientRect().top
+ contents.clientHeight * .6;

let time = () =>{
    for (let i = 0; i < item.length; i++){
        if (window.innerHeight > targetElement){
            item[i].classList.add('anime');
        }
    }
}
setInterval(time,1000);

});

まずコンテンツの６割が画面に入ったら'item'にクラスを追加したいと思っております。
setIntervalを使って1秒ごとにクラス'anime'を追加するのを、for文を回しているつもりです。
でもこれだと1秒後に一括でクラス'anime'が追加されてしまい、順番ごとに追加されません。

これをどうすれば遅延してクラスを追加することができますでしょうか。
どなたか教えていただけますと幸いです。

参考にCSSも載せます↓

.contents{
width: 1000px;
margin: 150px auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: #e5e5e5;
}

.item{
width: 30.3333%;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
margin: 0 0 20px;
opacity: 0;
transition: .6s;
}