CSSでアニメーションが動きません

web制作初心者です。
このページに載ってるアニメーションを付けたいのですが、上手く動きません。
https://yuyauver98.me/css-animation-slidein/
実験的にコピーライトを右から左に動かそうとしてます。
しかし動きません。
どうしたら良いのでしょうか？もしかしたら、 @keyframesというjQueryのようなソースコードをheadに入れる必要があるのですか？
解説よろしくお願いします。

<!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>
    <!--ボタン開始-->
    <button id="btn">ボタン</button>
    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener("mouseover", function(){
            alert("hi")
        })
   </script>
<!--ボタン終了-->
<!--ボタンで名前の入力開始-->
<h1>名前を記入してください。</h1>
<input type="text" id="name">
<button id="btn2">入力完了</button>
<div id="disply_name">

</div>
<script>
    var btn2 = document.getElementById('btn2');
    btn2.addEventListener('click', function(){
        var name = document.getElementById("name").value;
        document.getElementById("disply_name").innerHTML = name;
    })
</script>


    <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>
    <!--投稿フォーム-->
        <div class="wrapper">
            <div class="contact-form">
                <div class="input-fields">
                    <input type="text" class="input" placeholder="Name">
                    <input type="text" class="input" placeholder="Emaill Address">
                    <input type="text" class="input" placeholder="Phone">
                    <input type="text" class="input" placeholder="Subject">
                </div>
                <div class="msg">
                    <textarea placeholder="Message"></textarea>
                    <div class="btn">Send</div>
                </div>
            </div>
        </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 class="Headline">© 2019 dogo-art All Rights Reserved.</p>
        <br>
    </div>
    <!--　pagetopボタン　-->
	　<div class="page-top">
		<img src="img/page_top.gif" alt="ページトップボタン">
	</div>
</body>
</html>

/*スライド*/
.Headline {
    animation: SlideIn 1.6s;
  }
  
  /* CSSアニメーションの設定 */
  @keyframes SlideIn {
    0% {
      opacity: 0;/*初期状態では透明に*/
      transform: translateX(64px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

hatena19

2020/08/08 22:47

サンプルを作成して確認してみましたが、そのコードで問題なくアニメーションします。

Daregada

2020/08/09 01:07

HTMLファイルを省略せず、すべて質問に載せてください。その際、「'''」ではなく、「```」で囲むようにしてください。

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

回答1件

ベストアンサー

hatena19さん同様、こちらも手元で試してみたのですが問題なく動作していました。

どうしたら良いのでしょうか？もしかしたら、 @keyframesというjQueryのようなソースコードをheadに入れる必要があるのですか？

JavaScriptやjQueryは不要なので、そこは安心してください。

可能性として、いま思いつくものを挙げてみます。
ほかに何も試すことがなければ見てみてください。

[1] 古いブラウザ (IE) などを使用している
古いバージョンのブラウザを使用している場合、ベンダープレフィックスが必要かもしれません。
手っ取り早く、問題を解決する場合には最新バージョンの「Google Chrome」を使用してみてください。

[2] Webページの読み込みが遅く、画面に描画されるのにしばらく時間がかかっている
読み込みに時間がかかっている間にアニメーションが終了してしまっていて、
「しかし動きません。」
の状況になってしまっているかもしれません。

アニメーションが動いているかどうかを確かめるために、
animation: SlideIn 160s;などアニメーションにかかる秒数を大きくしてみてください。

ゆっっくり動いているのであれば、アニメーションを遅延させる、ページの表示スピードを改善する、などの対策をしてください。

[3] animationの記述に問題がある
下記参考サイトを見てみると、animation: 3s slidein;と書いてあります。
記述する順番をお作法通りにすると、適切に動作する場合もあるので試してみていいかもしれません。
(経験上、IEはこのような記述を教科書どおりにしないと動かないことがたまにあります。)

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/animation

投稿2020/08/08 23:05