アニメーションのｃｓｓが表示されません（アニメーションにならない）。

アニメーションを作成したいのですが、アニメーションの見本のソースコードを見つけたのですが、
全然効果が適応されません。

参考したのは、以下のサイトです。サイトをスクロースして一番下から２番目のアニメーション「すっとやってくるスライド」の例
のコードをそのままコピーしたのですが、付属画像のように全然アニメーションにならないです。
オシャレなアニメーションのスライドショーをCSSコピペで実装！

なぜでしょうか？
付属画像

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6	<meta content="text/html; charset=utf-8" />
7	<meta name="viewport" content="width=device-width, initial-scale=1">
8	<title>電話予約の入力画面</title>
9	
10	<link rel="stylesheet" href="animation1.css">
11	<script src="animation1.js"></script>
12
13	<script src="jquery-3.6.0.min.js"></script>
14	
15	
16 
17	<style>
18    
19
20</style>
21
22</head>
23<body>
24
25	<div class="slideshow">
26		<div class="slide">Slide 1</div>
27		<div class="slide">Slide 2</div>
28		<div class="slide">Slide 3</div>
29		<div class="slide">Slide 4</div>
30		
31		<div class="dot-cont">
32		  <div class="dot" onclick="clickChangeSlide(0)"></div>
33		  <div class="dot" onclick="clickChangeSlide(1)"></div>
34		  <div class="dot" onclick="clickChangeSlide(2)"></div>
35		  <div class="dot" onclick="clickChangeSlide(3)"></div>
36		</div>
37		<button class="arrow-button left-arrow" onclick="clickChangeSlide(i-1)">&#60;</button>
38		<button class="arrow-button right-arrow" onclick="clickChangeSlide(i+1)">&#62;</button>
39	  </div>
40
41
42</body>
43
44</html>

animation1css

css
1*{
2  box-sizing: border-box;
3}
4body{
5  margin: 0;
6  display: flex;
7  justify-content: center;
8  align-items: center;
9  height: 100vh;
10}
11.slideshow{
12  display: flex;
13  position: relative;
14  width: 100vw;
15  height: 100vh;
16  justify-content: center;
17  align-items: center;
18  background: black;
19}
20.slide{
21  position: absolute;
22  width: 100vw;
23  height: 100vh;
24  display: none;
25  z-index: 1;
26  font-size: 100px;
27  font-family: 'Staatliches', cursive;
28  align-items: center;
29  justify-content: center;
30  box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.3);
31}
32.slide:nth-of-type(1){
33  background: rgb(0,175,175);
34}
35.slide:nth-of-type(2){
36  background: rgb(255,100,100);
37}
38.slide:nth-of-type(3){
39  background: rgb(0,100,220);
40}
41.slide:nth-of-type(4){
42  background: rgb(255,200,100);
43}
44.active-slide{
45  z-index: 10;
46  display: flex;
47  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
48  animation: slideIn 1s cubic-bezier(0.7, 0, 0.3, 1) 0s 1 forwards;
49}
50.prev-slide{
51  display: flex;
52}
53.dot-cont{
54  position: absolute;
55  z-index: 11;
56  bottom: 5px;
57  width: 100px;
58  height: 20px;
59  display: flex;
60  justify-content: center;
61  align-items: center;
62  background: rgba(0,0,0,0.5);
63  border-radius: 10px;
64}
65.dot{
66  margin: 3px;
67  width: 10px;
68  height: 10px;
69  border-radius: 50%;
70  background: rgba(255,255,255,0.5);
71}
72.dot:hover{
73  cursor: pointer;
74  background: white;
75}
76.active-dot{ 
77  background: rgba(255,255,255,0.9);
78  animation: fadeIn 1s cubic-bezier(0.7, 0, 0.3, 1) 0s 1 forwards;
79}
80.arrow-button{
81  position: absolute;
82  z-index: 11;
83  background: rgba(0,0,0,0.5);
84  border: none;
85  outline: none;
86  cursor: pointer;
87  color: rgba(255,255,255,0.5);
88  font-size: 20px;
89  font-weight: bold;
90}
91.arrow-button:hover{
92  color: rgba(255,255,255,1);
93}
94.left-arrow{
95  left: 0;
96}
97.right-arrow{
98  right: 0;
99}
100
101
102
103@keyframes slideIn{
104  0%{
105    transform: translate(-100vw, 0);
106  }
107  100%{
108    transform: translate(0, 0);
109  }
110}
111@keyframes fadeIn{
112  0%{
113    background: rgba(255,255,255,0.5);
114  }
115  100%{
116    background: rgba(255,255,255,0.9);
117  }
118}
119
120
121

animatoin1.js

js
1let i = -1;
2let time = 3000;
3let slideTimer;
4let slides = document.getElementsByClassName('slide');
5let slideDots = document.getElementsByClassName('dot');
6
7function clickChangeSlide(n){
8  clearTimeout(slideTimer);
9  console.log(n);
10  changeSlide(n, true);
11}
12
13function changeSlide(n = i, manual = false){
14  
15  for(let j = 0; j < slides.length; j++){
16    if(j == i) {
17      slides[j].classList.add('prev-slide');
18      slides[j].classList.remove('active-slide');
19      slideDots[j].classList.remove('active-dot');
20      continue; 
21    }
22    slideDots[j].classList.remove('active-dot');
23    slides[j].classList.remove('prev-slide'); 
24    slides[j].classList.remove('active-slide');
25  }
26  if(manual){
27    if(n < 0) i = slides.length - 1
28    else if(n > slides.length - 1) i = 0
29    else i = n
30  }else i = i < slides.length - 1 ? i+1 : 0;
31  
32  slides[i].classList.add('active-slide');
33  slideDots[i].classList.add('active-dot');
34  
35  slideTimer = setTimeout('changeSlide()', time);
36}
37
38window.onload = changeSlide();

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

回答2件

<script src="animation1.js"></script>
を
</body>の直前においてみてください

<script src="animation1.js"></script>
</body>

投稿2022/01/05 08:33

編集2022/01/05 08:35

recal

総合スコア1128

Lhankor_Mhy

2022/01/05 08:36

横からすみません。 window.onload = changeSlide(); となっていますから、そこでなくてもたぶん動きます。

recal

2022/01/05 08:38

失礼しました早とちりでした。 jsを見てみると window.onload = changeSlide() だから場所は関係ないですね単純にcssが読み込まれてない表示ぽいので、css周りの記述を確認してみてください。

recal

2022/01/05 08:39

>Lhankor_Mhyさんありがとうございます。

Lhankor_Mhy

2022/01/05 08:43

と、思ったけど、 window.onload = changeSlide() だと、実行して返り値を代入してるから変ですね…… 初めの数秒間真っ暗になるのはそのせいでしょうか。

gujhufiugho

2022/01/05 09:47

回答ありがとうございます。どうやらファイルエラーでした。すみません。

recal

2022/01/05 10:35

解決できてよかったです。

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

ベストアンサー

ファイル名のつけ間違えでは
animation1css→animation1.css

投稿2022/01/05 08:33

Lhankor_Mhy

総合スコア36960

gujhufiugho

2022/01/05 09:47

回答ありがとうございます。animation1.cssでファイル名はあっていたのですが、 <link rel="stylesheet" href="animation1.css">をクリックすると、なぜエラー表示が出たので、animation1.cssのファイルを消去して、もう一度同じものを作ったらきちんと動きました。

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

あなたの回答