ローディングアニメーション

実現したいこと

ページを開いたらすぐ「ABCDEFG」中央表示→「ABCDEFG」その場でフェードアウト→左から紺色スライドイン（全画面）→紺が全面埋めたらすぐさま左からオレンジ色スライドイン（全画面）→トップページ表示

サンプルをかき集めてフェードアウト、スライドの途中まではできたものの、ここで行き詰まってしまいました。
カーテンを2回、左から右に引くイメージです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>TITLE</title>
6</head>
7<body>
8 <div id="splash">
9  <div id="splash-logo">
10    <div class="fadeUp">ABCDEFG</div>
11  </div>
12 </div>
13 <div class="splashbg1"></div>
14 <div class="splashbg2"></div>
15
16 <div id="container">
17  <p>
18  <!---コンテンツ全部ここ　headerからfooter-->
19　　　　</p>
20 </div>  
21
22  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
23  <script src="loading.js"></script>
24</body>
25</html>

CSS
1#splash {
2  position: fixed;
3  width: 100%;
4  height: 100%;
5  background: #fff;
6  z-index: 999;
7  text-align: center;
8  color: red;
9}
10
11#splash-logo {
12  position: absolute;
13  top: 50%;
14  left: 50%;
15  transform: translate(-50%, -50%);
16  font-size: 20px;
17  letter-spacing: 5px;
18}
19
20.splashbg1,
21.spulashbg2 {
22  display: none;
23}
24
25body.appear .splashbg1 {
26  display: block;
27}
28
29/*１個目スライドイン*/
30body.appear .splashbg1 {
31  animation-name: PageAnime;
32  animation-duration: 1s;
33  animation-timing-function: ease-in-out;
34  animation-fill-mode: forwards;
35  content: "";
36  position: fixed;
37  z-index: 999;
38  width: 100%;
39  height: 100vh;
40  top: 0;
41  left: 0;
42  transform: translateX(1);
43  background-color: #182578;
44}
45
46@keyframes PageAnime {
47  0% {
48    transform: translateX(-100%);
49  }
50  100% {
51    transform: translateX(0);
52  }
53}
54
55/*2個目スライドイン*/
56body.appear .splashbg2 {
57  animation-name: PageAnime2;
58  animation-duration: 1s;
59  animation-timing-function: ease-in-out;
60  animation-fill-mode: forwards;
61  content: "";
62  position: fixed;
63  z-index: 999;
64  width: 100%;
65  height: 100vh;
66  top: 0;
67  left: 0;
68  transform: translateX(1);
69  background-color: #ffa500; 
70}
71
72@keyframes PageAnime2 {
73  0% {
74    transform: translateX(-100%);
75  }
76  100% {
77    transform: translateX(0);
78  }
79}
80
81#container {
82  opacity: 0; 
83  position: relative;
84  z-index: 1;
85}
86
87body.appear #container {
88  animation-name: PageAnimeAppear;
89  animation-duration: 1s;
90  animation-delay: 0.2s;
91  animation-fill-mode: forwards;
92  opacity: 0;
93}
94
95@keyframes PageAnimeAppear {
96  0% {
97    opacity: 0;
98  }
99  100% {
100    opacity: 1;
101  }
102}

JS
1$(window).on('load',function(){
2    $("#splash-logo").delay(1200).fadeOut('slow');
3	
4    $("#splash").delay(1500).fadeOut('slow',function(){
5        $('body').addClass('appear');
6    });
7
8    $('.splashbg1').on('animationend', function() {    
9        fadeAnime();
10    }); 
11});

行動規範の内容に同意します

回答1件

ベストアンサー

仕様がわからないところもあるので適当に

css
1<style>
2*{
3margin:0px;
4padding:0px;
5}
6#splash-logo {
7  position: absolute;
8  top: 50%;
9  left: 50%;
10  transform: translate(-50%, -50%);
11  font-size: 20px;
12  letter-spacing: 5px;
13  color: red;
14  animation: fadeOut 2s ;
15  animation-fill-mode:forwards;
16}
17.splashbg1{
18background-Color:lime;
19width:100%;
20height:100%;
21right:100%;
22position:absolute;
23  animation: slideIn 3s ;
24  animation-fill-mode:forwards;
25}
26.splashbg2{
27background-Color:aqua;
28width:100%;
29height:100%;
30right:100%;
31position:absolute;
32  animation: slideIn 4s ;
33  animation-fill-mode:forwards;
34}
35@keyframes fadeOut{
36  from,80%{ opacity:1;}
37  to  { opacity: 0}
38}
39@keyframes slideIn{
40  from,80%{ right:100%;}
41  to  { right: 0;}
42}
43</style>
44<div id="splash">
45<div id="splash-logo">
46<div class="fadeUp">ABCDEFG</div>
47</div>
48</div>
49<div class="splashbg1"></div>
50<div class="splashbg2"></div>