ccsでの文字のアニメーションの動きのコードを書いたのに、画面に全く表示されない。

実現したいこと
文字に動きを付けたいと思い、文字に動きを付けるのは初めての作業なので、以下のサイトを参考にコードをコピペして、そのまま全く同じコードを書いたのですが、Visual Studio Codeのgo liveという機能で試しても、白い画像のままで全く表示されないのですが、原因が分かりません。

コードが間違っているということは無いと思います。全く同じコードをコピペして書いたので。
原因はなんでしょうか？

参考サイト
https://b-risk.jp/blog/2021/01/anim-reference/

サイトの画像の部分をそのまま「コピペしました。
サイトに書いてある文字がぬるりと現れる　という項目のところんの部分なのですが、
画像

html
1<!DOCTYPE html>
2
3<html>
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    <link rel="stylesheet" href="bbb.css">
10   
11    
12    <style type="text/css">
13
14    </style>
15
16
17</head>
18
19<body>
20 <!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応-->
21    <div class="wrapper">
22
23<div class="matrix anim">
24  <span class="bg-wrap"><span class="inn large">文字がぬるりと現れる</span></span>
25  <span class="bg-wrap"><span class="inn small">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキスト</span></span>
26</div>
27
28
29    </div>
30</body>
31
32</html>
33

css
1.matrix .bg-wrap,
2.matrix .bg-wrap .inn {
3  display: block;
4}
5 
6.matrix .bg-wrap {
7  overflow: hidden;
8  opacity: 0;
9}
10 
11.matrix .bg-wrap + .bg-wrap {
12  margin-top: 10px;
13}
14 
15.matrix .bg-wrap .inn.large {
16  font-size: 36px;
17  font-weight: bold;
18}
19.matrix .bg-wrap .inn.small {
20  font-size: 15px;
21}
22 
23.matrix .bg-wrap .inn {
24  opacity: 0;
25  transform: matrix(1, 0, 0, 1, 0, 100);
26  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
27}
28 
29.matrix.is-animated .bg-wrap {
30  opacity: 1;
31}
32 
33.matrix.is-animated .bg-wrap .inn {
34  opacity: 1;
35  transform: matrix(1, 0, 0, 1, 0, 0);
36}

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

回答2件

ベストアンサー

どうも参考にされたサイトのサンプルはJQueryで動きのきっかけが起こされているようです。
「コピペでOK CSSアニメーション」と謳いながら、看板どおりではないようですね。

投稿2021/07/18 09:47

itagagaki

総合スコア8402

gujhufiugho

2021/07/19 03:19

ありがとうございます。そうなんですね。JQueryをダウンロードして、下記のサイトを参考にしたら、全く同じような動きができました。ありがとうございます「。 https://rico-notes.com/programming/css/css-fade-in/

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

itagagaki さんのコメントにあるようにjQueryが使われているようです。

手取り早く試したいのであればデモサイトのソースを表示させてjsファイルを拾って読み込ませてみてはいかがでしょうか。（CSSも必要かもしれません）

HTML
1...
2// 125行目あたり
3<script src="./js/jquery-3.3.1.min.js"></script>
4<script src="./js/common.js"></script>

投稿2021/07/19 02:17

agumon

総合スコア271

gujhufiugho

2021/07/19 03:18

ありがとうござます。読み込ませました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ccsでの文字のアニメーションの動きのコードを書いたのに、画面に全く表示されない。

関連した質問