フェードインを時間差で発生させたい。

フェードインの時間差処理の仕方を色々な方法で試してみましたが、上手くいきませんでした。
どうしてか、フェードイン処理のされているはずのテキストが最初から表示されており、その数秒後にフェードアウト・フェードインが発生します。
数秒遅れてフェードインをしたいのは、<p2>あいうえお</p2>の部分です。
不明瞭な文章で申し訳ありません。どうか、宜しくお願い致します。
テキストは恥ずかしい文章でして、ほぼ「あああああ」に変えました。読みにくいとは思いますが、ご了承ください。

該当のソースコード

html
1<!DOCTYPE>
2 <html>
3  <head>
4    <meta charset="UTF-8">
5    <meta>
6    <script src="jquery-3.5.1.min.js"></script>
7    <link rel="stylesheet" href="nayami.css">
8  </head>
9  <body>
10    <h2>ああああああ</h2><br>
11
12    <div class="a b">
13      <img src="sky.jpg">
14      <p>あああああ<br>ああああ</p>
15      <p2>あいうえお</p2></div>
16      <br><br><br><br><br><br><br><br>
17  <section>
18    <div class="fade">あああああ</div>
19    <div class="fade2"><br>あああああ<br><br>ああああああああ<br><br>ああああああ</div><br><br><br><br><br><br>
20    <div class="fade3">service</div><br><br><br><br><br><br><br>
21    <div class="fade4"></div><br><br><br><br><br>
22    <div class="fade5"></div>
23    <div class="fade6"></div><br><br><br><br><br>
24    <div class="fade7"></div>
25  </section>
26  <script src="na.js"></script>
27  </body>
28</html>
29

css
1body{
2  background: #f2f8ed
3}
4
5.a{
6  position: relative;
7}
8
9.a p{
10  position: absolute;
11  font-family: serif;
12  font-size: 70px;
13  width: 635px;
14  border-bottom: solid 1px;
15  animation-name: my-fade-in;
16  animation: my-fade-in 1.1s ease forwards;
17  top: 150;
18  left: 40;
19  margin:0;
20  padding:0;
21}
22
23@keyframes my-fade-in {
24  from {
25    opacity: 0;
26    transform: translatex(-500px);
27        }
28    }
29
30.b p2{
31  position: absolute;
32  top: 400px;
33  left:50px;
34  margin:0;
35  padding:0;
36  font-size: 22px;
37  font-family: serif;
38  animation: my-fade-in2 1.1s ease 1s 1 normal;
39}
40
41@keyframes my-fade-in2 {
42   0% {
43      opacity: 0;
44      transform: translateY(-35px);
45   }
46   100% {
47      opacity: 1;
48      transform: translatey(0px);
49   }
50}
51
52.fade{opacity: 0;}
53.fadeInDown{
54   text-align: center;
55    animation-name: fadeInDown;
56    animation-duration: 1s;
57    animation-fill-mode: forwards;
58    font-weight: bold;
59    font-size: 35px;
60    font-family: serif;
61    top: 1820px;
62}
63
64@keyframes fadeInDown {
65    0% {
66        opacity: 0;
67    }
68    100% {
69    opacity: 1;
70    transform: translatey(-50px);
71    }
72}
73
74
75
76
77
78
79.fade2{opacity: 0;}
80.fadeInDown2{
81    text-align: center;
82    animation-name: fadeInDown2;
83    animation-duration: 1s;
84    animation-fill-mode: forwards;
85    font-size: 18px;
86    font-family: serif;
87}
88
89@keyframes fadeInDown2 {
90    0% {
91        opacity: 0;
92    }
93    100% {
94    opacity: 1;
95    transform: translatey(-50px);
96    }
97}
98
99.fade3{opacity: 0;}
100.fadeInDown3{
101    text-align: center;
102    animation-name: fadeInDown3;
103    animation-duration: 1s;
104    animation-fill-mode: forwards;
105    font-weight: bolder;
106    font-size: 42px;
107    font-family: serif;
108}
109
110@keyframes fadeInDown3 {
111    0% {
112        opacity: 0;
113    }
114    100% {
115    opacity: 1;
116    transform: translatey(-50px);
117    }
118}
119
120.fade4{opacity: 0;}
121.fadeInDown4{
122    animation-name: fadeInDown4;
123    animation-duration: 1s;
124    animation-fill-mode: forwards;
125    font-weight: bolder;
126    font-size: 40px;
127    font-family: serif;
128}
129
130@keyframes fadeInDown4 {
131    0% {
132        opacity: 0;
133    }
134    100% {
135    opacity: 1;
136    transform: translatey(-50px);
137    }
138}
139
140.fade5{opacity: 0;}
141.fadeInDown5{
142    animation-name: fadeInDown5;
143    animation-duration: 1s;
144    animation-fill-mode: forwards;
145    font-weight: bolder;
146    font-size: 40px;
147    font-family: serif;
148}
149
150@keyframes fadeInDown5 {
151    0% {
152        opacity: 0;
153    }
154    100% {
155    opacity: 1;
156    transform: translatey(-50px);
157    }
158}
159
160.fade6{opacity: 0;}
161.fadeInDown6{
162    animation-name: fadeInDown6;
163    animation-duration: 1s;
164    animation-fill-mode: forwards;
165    font-weight: bolder;
166    font-size: 20px;
167    font-family: serif;
168}
169
170@keyframes fadeInDown6 {
171    0% {
172        opacity: 0;
173    }
174    100% {
175    opacity: 1;
176    transform: translatey(-50px);
177    }
178}
179
180
181.fade7{opacity: 0;}
182.fadeInDown7{
183    animation-name: fadeInDown7;
184    animation-duration: 1s;
185    animation-fill-mode: forwards;
186    font-weight: bolder;
187    font-size: 40px;
188    font-family: serif;
189}
190
191@keyframes fadeInDown7 {
192    0% {
193        opacity: 0;
194    }
195    100% {
196    opacity: 1;
197    transform: translatey(-50px);
198    }
199}
200

javascript
1$(function () {
2   $(window).scroll(function () {
3       const wHeight = $(window).height();
4       const scrollAmount = $(window).scrollTop();
5       $('.fade').each(function () {
6           const targetPosition = $(this).offset().top;
7           if(scrollAmount > targetPosition - wHeight + 1300) {
8               $(this).addClass("fadeInDown");
9           }
10       });
11   });
12});
13
14$(function () {
15   $(window).scroll(function () {
16       const wHeight = $(window).height();
17       const scrollAmount = $(window).scrollTop();
18       $('.fade2').each(function () {
19           const targetPosition = $(this).offset().top;
20           if(scrollAmount > targetPosition - wHeight + 1300) {
21               $(this).addClass("fadeInDown2");
22           }
23       });
24   });
25});
26
27$(function () {
28   $(window).scroll(function () {
29       const wHeight = $(window).height();
30       const scrollAmount = $(window).scrollTop();
31       $('.fade3').each(function () {
32           const targetPosition = $(this).offset().top;
33           if(scrollAmount > targetPosition - wHeight + 1300) {
34               $(this).addClass("fadeInDown3");
35           }
36       });
37   });
38});
39
40$(function () {
41   $(window).scroll(function () {
42       const wHeight = $(window).height();
43       const scrollAmount = $(window).scrollTop();
44       $('.fade4').each(function () {
45           const targetPosition = $(this).offset().top;
46           if(scrollAmount > targetPosition - wHeight +1000) {
47               $(this).addClass("fadeInDown4");
48           }
49       });
50   });
51});
52
53$(function () {
54   $(window).scroll(function () {
55       const wHeight = $(window).height();
56       const scrollAmount = $(window).scrollTop();
57       $('.fade5').each(function () {
58           const targetPosition = $(this).offset().top;
59           if(scrollAmount > targetPosition - wHeight + 1000) {
60               $(this).addClass("fadeInDown5");
61           }
62       });
63   });
64});
65
66$(function () {
67   $(window).scroll(function () {
68       const wHeight = $(window).height();
69       const scrollAmount = $(window).scrollTop();
70       $('.fade6').each(function () {
71           const targetPosition = $(this).offset().top;
72           if(scrollAmount > targetPosition - wHeight + 1000) {
73               $(this).addClass("fadeInDown6");
74           }
75       });
76   });
77});
78
79$(function () {
80   $(window).scroll(function () {
81       const wHeight = $(window).height();
82       const scrollAmount = $(window).scrollTop();
83       $('.fade7').each(function () {
84           const targetPosition = $(this).offset().top;
85           if(scrollAmount > targetPosition - wHeight + 1000) {
86               $(this).addClass("fadeInDown7");
87           }
88       });
89   });
90});
91

試したこと

ｈｔｍｌ

<div class="fade">ここがふわっとするよ</div>

ｃｓｓ
.fade{

animation: fadeIn 0.2s ease 0.3s 1 normal;

}

@keyframes fadeIn { /animetion-nameで設定した値を書く/

0% {opacity: 0} /アニメーション開始時は不透明度0%/

100% {opacity: 1} /アニメーション終了時は不透明度100%/

}

このコードを応用して試してみたのですが、遅れて表示する処理はできませんでした。

回答1件

ベストアンサー

フェードインをcssではなく、jQueryでやってみてはいかがでしょうか？
faedinという関数があります。
たしか、コールバックがあったので時間差の制御がしやすくなると思います。

投稿2020/09/19 13:40

Kaiser

総合スコア295

回答へのコメント

退会済みユーザー

2020/09/20 02:30

できませんでした…ｈｔｍｌの <div class="a b"> <img src="sky.jpg"> <p>あああああ<br>ああああ</p> <p2>あいうえお</p2></div> と、ｃｓｓの .a{ position: relative; } .a p{ position: absolute; font-family: serif; font-size: 70px; width: 635px; border-bottom: solid 1px; animation-name: my-fade-in; animation: my-fade-in 1.1s ease forwards; top: 150; left: 40; margin:0; padding:0; } @keyframes my-fade-in { from { opacity: 0; transform: translatex(-500px); } } .b p2{ position: absolute; top: 400px; left:50px; margin:0; padding:0; font-size: 22px; font-family: serif; animation: my-fade-in2 1.1s ease 1s 1 normal; } @keyframes my-fade-in2 { 0% { opacity: 0; transform: translateY(-35px); } 100% { opacity: 1; transform: translatey(0px); } } に応用できないのです。

退会済みユーザー

2020/09/20 02:40

出来ましたーーー！ありがとうございます！