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

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

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

なぜでしょうか？
付属画像
イメージ説明

html
<!DOCTYPE html>

<html lang="ja">

<head>
	<meta content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>電話予約の入力画面</title>
	
	<link rel="stylesheet" href="animation1.css">
	<script src="animation1.js"></script>

	<script src="jquery-3.6.0.min.js"></script>
	
	
 
	<style>
    

</style>

</head>
<body>

	<div class="slideshow">
		<div class="slide">Slide 1</div>
		<div class="slide">Slide 2</div>
		<div class="slide">Slide 3</div>
		<div class="slide">Slide 4</div>
		
		<div class="dot-cont">
		  <div class="dot" onclick="clickChangeSlide(0)"></div>
		  <div class="dot" onclick="clickChangeSlide(1)"></div>
		  <div class="dot" onclick="clickChangeSlide(2)"></div>
		  <div class="dot" onclick="clickChangeSlide(3)"></div>
		</div>
		<button class="arrow-button left-arrow" onclick="clickChangeSlide(i-1)">&#60;</button>
		<button class="arrow-button right-arrow" onclick="clickChangeSlide(i+1)">&#62;</button>
	  </div>


</body>

</html>

animation1css

css
*{
  box-sizing: border-box;
}
body{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.slideshow{
  display: flex;
  position: relative;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: black;
}
.slide{
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: none;
  z-index: 1;
  font-size: 100px;
  font-family: 'Staatliches', cursive;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.3);
}
.slide:nth-of-type(1){
  background: rgb(0,175,175);
}
.slide:nth-of-type(2){
  background: rgb(255,100,100);
}
.slide:nth-of-type(3){
  background: rgb(0,100,220);
}
.slide:nth-of-type(4){
  background: rgb(255,200,100);
}
.active-slide{
  z-index: 10;
  display: flex;
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
  animation: slideIn 1s cubic-bezier(0.7, 0, 0.3, 1) 0s 1 forwards;
}
.prev-slide{
  display: flex;
}
.dot-cont{
  position: absolute;
  z-index: 11;
  bottom: 5px;
  width: 100px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
  border-radius: 10px;
}
.dot{
  margin: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}
.dot:hover{
  cursor: pointer;
  background: white;
}
.active-dot{ 
  background: rgba(255,255,255,0.9);
  animation: fadeIn 1s cubic-bezier(0.7, 0, 0.3, 1) 0s 1 forwards;
}
.arrow-button{
  position: absolute;
  z-index: 11;
  background: rgba(0,0,0,0.5);
  border: none;
  outline: none;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  font-size: 20px;
  font-weight: bold;
}
.arrow-button:hover{
  color: rgba(255,255,255,1);
}
.left-arrow{
  left: 0;
}
.right-arrow{
  right: 0;
}



@keyframes slideIn{
  0%{
    transform: translate(-100vw, 0);
  }
  100%{
    transform: translate(0, 0);
  }
}
@keyframes fadeIn{
  0%{
    background: rgba(255,255,255,0.5);
  }
  100%{
    background: rgba(255,255,255,0.9);
  }
}

animatoin1.js

js
let i = -1;
let time = 3000;
let slideTimer;
let slides = document.getElementsByClassName('slide');
let slideDots = document.getElementsByClassName('dot');

function clickChangeSlide(n){
  clearTimeout(slideTimer);
  console.log(n);
  changeSlide(n, true);
}

function changeSlide(n = i, manual = false){
  
  for(let j = 0; j < slides.length; j++){
    if(j == i) {
      slides[j].classList.add('prev-slide');
      slides[j].classList.remove('active-slide');
      slideDots[j].classList.remove('active-dot');
      continue; 
    }
    slideDots[j].classList.remove('active-dot');
    slides[j].classList.remove('prev-slide'); 
    slides[j].classList.remove('active-slide');
  }
  if(manual){
    if(n < 0) i = slides.length - 1
    else if(n > slides.length - 1) i = 0
    else i = n
  }else i = i < slides.length - 1 ? i+1 : 0;
  
  slides[i].classList.add('active-slide');
  slideDots[i].classList.add('active-dot');
  
  slideTimer = setTimeout('changeSlide()', time);
}

window.onload = changeSlide();