JavaScriptを使ったCSSアニメーションについて

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。
JavaScriptで以下の「#top-outer-1」に「.top-outer-out」、「#top-outer-2」に「.top-outer-in」を自動的に付与し実行したいです。（「.top-outer-box」は「#top-outer-1」「#top-outer-2」両方に付与しています。）

前提

HTML,CSS,JavaScriptコード自体は書きましたが、実行しても「#top-outer-2」だけ実行されません。検証ツールから確認しましたが、「.top-outer-inを自動で付与するところまでできているので、JSではなくCSSの問題だと思うのですが、何が問題なのかわかりません。
解決策などご教示いただけませんでしょうか。以下に該当箇所のCSSを添付します。

【CSS】
.top-outer-box {
width: 100vw;
height: 50vh;
position: relative;
}
#top-outer-1 {
background: red;
left: 0;
}
#top-outer-2 {
background: yellow;
left: 100%;
}
.top-outer-out {
animation: top-outer-out 10s forwards linear;
}
.top-outer-in {
animation: top-outer-in 10s forwards linear;
}
@keyframes top-outer-out {
0%{
left: 0%;
}
100%{
left: -100%;
}
}
@keyframes top-outer-in {
0%{
left: 100%;
}
100%{
left: 0%;
}
}

試したこと

全てのコードの記入ミス、正誤を確認しました。

補足情報（FW/ツールのバージョンなど）

Comments

[yambejp]

問題をきりわけるべきです
jsは関係ないならjsの質問部分は抜いて、複数のcssを付加すると設定が反映されないことだけ質問を絞ったほうがよいでしょう。
CSS設定済みのHTMLとキーフレームアニメを明示ください

[退会済みユーザー]

コメントいただきありがとうございます。
先ほど、余計なCSSを書き込んでいたことが原因だと発覚し、問題が解決いたしました。
せっかくコメントいただいたのに申し訳ありません。

[yambejp]

解決したようでなによりです。
自己解決でクローズしちゃってください

Answer 1

誤ったCSSを挿入したことを見つけ、自己解決しました

Answer 2

まず、JavaScriptでCSSアニメーションを設定するには、要素に対して transitionプロパティ や animationプロパティ を動的に追加する方法があります。また、Web Animations APIというJavaScriptのみでアニメーションを実装する方法もあります。

次に、CSSアニメーションが実行されない原因についてですが、以下のような可能性が考えられます。

・CSSのコードに誤りがある場合（例えば全角で入力した部分など）
・CSSのアニメーションが他のアニメーションと競合している場合
・CSSのアニメーションが一度しか実行されない設定になっている場合
・CSSのアニメーションが終了したときにイベントリスナーを登録していない場合

該当箇所のCSSを拝見しましたが、特に誤りは見つかりませんでした。もしかしたら、JavaScriptのコードに問題があるかもしれません。JavaScriptのコードを教えていただけますか？