JavaScriptでアニメーションをループさせたい

Question

前提・実現したいこと

CSSの@keyframesで作った色が変化するアニメーションをループさせたいです。
変化が終わったら再度、最初からアニメーションをスタートさせたいです。

発生している問題・エラーメッセージ

requestAnimationFrame();で処理を繰り返したのですが１回終わったところで止まってしまいループされません。

該当のソースコード

CSS

.pp{
width: 200px;
height: 200px;
animation: m 4s forwards;
margin: 0 auto;
padding: 100px;
margin-top: 100px;
margin-bottom: 200px;
display: block;
}

@keyframes m{
    0%{
        background-color: chartreuse;
    }

    100%{
        background-color: cornflowerblue;
    }
}

JavaScript

const bb = document.getElementById('lp');

function jk() {
bb.classList.add('pp');
console.log('aaaa');
requestAnimationFrame(jk);
}

jk();

試したこと

関数内で一度クラスを外して、再度つけることを試しましたが
関数を呼び出した時点で恐らくすべて同時に実行されてしまうので上手くいきませんでした。
そのため最後に処理をリセットすれば上手くいくと思いましたがその方法が調べてもわかりませんでした。

console.logではループされていました。

処理を途中でリセットする方法を教えていただきたいです。
宜しくお願い致します。

Answer 1

HTMLをご提示いただいていないので、推測での回答になりますが、普通にanimation-iteration-count: infiniteでいいのではないかな、と思いました。

infinite
アニメーションは無制限に繰り返されます。
animation-iteration-count - CSS: カスケーディングスタイルシート | MDN

Comments

[shunta80]

いただいたコードでループさせることができました
ありがとうございました。