スライドアニメーションの処理開始のタイミングについて

Question

前提・実現したいこと

サイトのTOP画像にスライドアニメーションを適応した場合ロード中に処理が終わってしまい、サイト表示されるときにはアニメーションが終了してしまっているので、アニメーションの意味がない状態です。

本来であればロードアニメーションを付けていたのでそのせいかと思ってなくしたのですが、はずしてもまえと同じ状況になってしまい手詰まりです。。。
いろいろ調べて「onload」や「DOMContentLoaded」も試してみたのですが、全然うまくいかなかったので詳しい方教えていただけませんでしょうか？

希望としてはTOPページの画像等データをすべて読み込んだ状態でサイト表示、そしてサイト表示になった場合にスライドアニメーションが開始される、というのが望ましいです。

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

アニメーションの処理とローディングが同時に処理開始してしまうので結果としてアニメーションが見れなくなってします。

該当のソースコード

javascript

試したこと

「onload」や「DOMContentLoaded」

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

Comments

[kei344]

（質問文は編集できます）書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを質問文に追記されたほうが回答を得やすいと思います。

[anagram]

申し訳ありません。。。
コード書いたほうが回答しやすいですよね。今後はコードを書くように致します。助言いただきありがとうございました！

Answer 1

いろいろ調べて「onload」や「DOMContentLoaded」も試してみた

それが正解だと思います。

サンプル

<div>test</div>

.loaded{
  animation: test 2s
}
@keyframes test{
  from {   opacity:1; }
  to   {   opacity:0; }
}

document.addEventListener('DOMContentLoaded', async function(){
  await new Promise( resolve => setTimeout( resolve, 3000 ) ); // 3秒待ち
  document.body.classList.add('loaded');
});

Comments

[anagram]

サンプルコードを記載していただきありがとうございました！
document.addEventListener('DOMContentLoaded', async function(){
await new Promise( resolve => setTimeout( resolve, 3000 ) ); // 3秒待ち
document.body.classList.add('loaded');
});
これがしたくてずっとできなかったので非常に助かりました！
色々応用もできたのでここから派生でやっていきたいと思います。
初心者の質問に回答していただきありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりです。

蛇足ですが、ページが表示され次第アニメーション開始、ということであれば、以下で十分です。

document.addEventListener('DOMContentLoaded', function(){
document.body.classList.add('loaded');
});