delighterの使い方がわかりません

https://coliss.com/articles/build-websites/operation/javascript/js-add-css-animation-delighters.html
こちらのサイトのアニメーションを使ってみようとコピペしたのですが、動きませんでした。
何が行けなかったのでしょうか？
該当の部分はコメントでデリターと書いてます。
クロームを使ってます。
WEB制作初心者です。よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <script type="text/javascript" src="delighters.js"></script>
  <script src="js/jquery-3.5.1.min.js"></script>
  <script src="js/my_script.js"></script>
</head>
<body class="body">
    <header class="header">
        <div class="navbar">
            <div class="logo">
                <img src="img/logo.png" alt="ZOOLOPA2">
            </div>
                <div class="global-nav">
                    <ul>
                        <li><a href="#">動物</a></li>
                        <li><a href="#">zoolopaとは</a></li>
                        <li><a href="#">イベント</a></li>
                        <li><a href="#">よくある質問</a></li>
                        <li><a href="#">お問い合わせ</a></li>
                    </ul>
                </div>
        </div>
    </header>

<!--メイン画像-->
    <div class="hero">
        <div class="lead">
            <h1>俺に会いに来いよ</h1>
            <p>待ってるからさ</p>
        </div>
    </div>
<!--メイン画像終了-->

    <div class="content">
        <main class="main">
            <h1>注目の動物</h1>
            <article class="section">
                    <div class="images">
                        <img src="img/panda.jpg" alt="パンダの画像">
                    </div>
                    <div class="text">
                        <h2>パンダ</h2>
                        <p>パンダはマジでかわいいよね。</p>
                    </div>
            </article>
            <article class="section">
                    <div class="images">
                        <img src="img/zou.jpeg" alt="象の画像">
                    </div>
                    <div class="text">
                        <h2>象</h2>
                        <p>象はマジで大きいよね。</p>
                    </div>
            </article>
            <article class="section">
                    <div class="images">
                        <img src="img/raion.jpeg" alt="ライオンの画像">
                    </div>
                    <div class="text">
                        <h2>ライオン</h2>
                        <p>ライオンはマジで凶暴よね。</p>
                    </div>
            </article>
        </main>
        
        <aside class="sidebar">
            <div class="pengin">
                <h1>秋のペンギン祭り</h1>
                <p>ペンギンと地獄の果てまで戯れよう！</p>
                <img src="img/pengin.jpeg" alt="ペンギンの画像">
            </div>
            <div class="fes">
                <h1>秋の大運動会</h1>
                <p>夜はクラブで大暴れしよう！</p>
                <img src="img/club.jpg" alt="クラブの画像">
                
            </div>
         </aside>
    </div>
    <div class="content_ai">
        <div class="aiha">
            <br>
            <h1 class="aiha_data-delighter">愛は時代を超えて存在するもの。</h1>
        </div>
        <div class="mukasiwo">
            <p class="mukasiwo_data-delighter">
            "    昔を生きた文豪や、"
            <br>
            "道後で今を生きる人の「ラブレター」をテーマに、"
            <br>
            "愛のメッセージを展示します。"
        </p>
        </div>
        <div class="mede">
            <p class="mede_data-delighter">
                “目で耳で触って読む”をキーワードに"
                <br>
                五感を使って感じられる「ラブレター」の世界を紡ぎます。
            </p>
                
        </div>
    </div>
<!--スライドイン開始-->
<h1 class="Headline">スライドイン</h1>
<!--スライドイン終了-->

<!--デリター開始-->
<div >
<h1 class="foo" data-delighter>デリター</h1>
</div>

<!--デリター終了-->


    <footer class="footer">
        <div class="dogoart_logo">
                <img src="img/dogoart_logo.svg" alt="道後アートロゴ">
        </div>
        <div class="footer_text">
                    <h1 class="footer_text_top">日比野克彦×道後温泉 道後アート2019・2020
                        <br>
                        「ひみつジャナイ基地プロジェクト」
                    </h1>
                
                <div class="footer_text_botom">
                    <div class="footer_text_left">
                        <h1>
                            ■道後アート実行委員会事務局
                        </h1>
                        <p>愛媛県松山市道後湯之町5-6
                            <br>
                            (松山市産業経済部 道後温泉事務所内)
                            <br>
                            TEL：089-921-6464　FAX：089-934-3415
                        </p>
                    </div>
                    <div class="footer_text_right">
                        <h1>
                            ■道後アート実行委員会事務局
                        </h1>
                        <p>
                            愛媛県松山市道後湯之町6-8
                            <br>
                            （道後温泉旅館協同組合 道後観光案内所内）
                            <br>
                            TEL：089-907-5930（8:30〜19:00）　MAIL：kumiai@dogo.or.jp
                        </p>
                    </div>
                </div>
        </div>
    </footer>
    <div class="copy_right">
        <p >© 2019 dogo-art All Rights Reserved.</p>
        <br>
    </div>
    <!--　pagetopボタン　-->
	　<div class="page-top">
		<img src="img/page_top.gif" alt="ページトップボタン">
	</div>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

.body {
    background-color: #c5ecfd;
}

/*デフォルトCSSをリセットする*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: 'Roboto', sans-serif;
}



.header {
    background-color: aquamarine;
    max-width: 1140px;
    margin: 0 auto;
}
.navbar {
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: space-between;
}
.logo {
    display: flex;
    align-items: center;
}
.global-nav a {
    color: red;
}

.global-nav ul{
    display: flex;
    list-style: none;
    margin: 0; /* ヘッダーを細くする */
}
.global-nav li{
    margin: 1rem;
    font-weight: 600;
}
.hero {
    background-image: url(../img/gorira.jpeg);
    background-size: cover;
    background-position: center;
    min-height: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
    
}
.lead {
    background-color: aquamarine;
    color: red;
    text-align: center;
}

.content {
    display: flex;
    max-width: 1140px;
    margin: 0 auto;
    background-color: pink;
    border:solid rgb(76, 179, 102);
}
.main {
    flex: 5;
    margin: 1em;
    border:solid rgb(76, 179, 102);
}
.sidebar {
    flex: 2;
    margin: 1em;
    border:solid rgb(76, 179, 102);
}
.main img {
    width: 100%;
}
.sidebar img {
    width: 80%;
}
.section {
    display: flex;
}
.images {
    flex: 2;
}
.text{
    flex: 5;
    margin: 1em;
}
.content_ai {
    max-width: 1140px;
    background-color: rgb(252,228,218);
    display: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding-left:  center;
    padding-right:  center;
    padding-top: 50px;
    padding-bottom: 50px;
}
.content_ai h1 {
    text-align: center;
    color: rgb(230,25,116);
    margin-top: 0em;
}
.content_ai p {
    text-align: center;
    color: rgb(230,25,116);
}
.gokan p {
    margin-block-start: 0;
    margin-block-end: 0;
}
/* CSSアニメーションの指定 */
.Headline{
    animation: SlideIn 1.2s infinite;
    text-align: center;
  }
  
  /* CSSアニメーションの設定 */
  @keyframes SlideIn {
    0% {
      opacity: 1;
      transform: translateY(64px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* デリター開始 */
    /* 基本のスタイル */
    .foo.delighter {
        transition: all .3s ease-out;
        transform: translateX(-100%);
        opacity: 0;
    }

    /* スタート時のスタイル */
    .foo.delighter.started {
        transform: none;
        opacity: 1;
    }

    /* エンド時のスタイル */
    .foo.delighter.started.ended {
        border: solid red 10px;
    }
/* デリター終了 */

.footer{
    max-width: 1140px;
    background-color: gray;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}
.footer {
    display: flex;
    margin: 0 auto;
    border:solid rgb(76, 179, 102);
}
.dogoart_logo {
    flex: 1;
    margin: 3em;
    border:solid rgb(76, 179, 102);
}

.footer_text {
    flex: 5;
    display: column;
    border:solid rgb(76, 179, 102);
}
.footer_text p {
    font-size: 0.8em;
    border:solid rgb(76, 179, 102);
}
.footer_text h1 {
    font-size: 0.9em;
    border:solid rgb(76, 179, 102);
}
.footer_text_botom {
    display: flex;
    justify-content: space-around;
    border:solid rgb(76, 179, 102);
}
.copy_right {
    background-color: gray;
    max-width: 1140px;
    padding: 0;
    margin: 0 auto;
}
.copy_right p {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    border:solid rgb(76, 179, 102);
}

/*ページトップボタン*/
.page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 99;
}
.page-top img {
	width: 65px;
	height: 65px;
}