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

実現したいこと

ここに実現したいことを箇条書きで書いてください。
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/ツールのバージョンなど）