cssで文字を一文字ずつゆっくりと表示させたい

初心者で無知なことが多いですがご容赦ください。

今、架空の観光地サイト制作を試みてます。

トップページに画像を配置することはできました。その画像の上にテキストを表示させたいのですが、
cssのアニメーションで一文字ずつゆっくりと表示させたいのです。

ネットで似たようなコードを見つけましたが、自分で調整できず行き詰まってしまいました。

お力添えいただけたら幸いです。

追記
まだCSS入力に行き詰まっていますのでもう少し進んだら再度更新いたします。その際はご解答いただけたら幸いです。

●HTML

<div class="slidebox">
<p class="toptext">文字文字文字</p>
</div>

meg_

2021/05/14 16:18

html, cssが無いので分かりません。途中で良いのでコードを載せてください。

hisui-ferret

2021/05/14 16:42

まだhtmlしか入力できていない状態なのですが、こう言った質問をする際はcssもある程度入力してからのほうがよろしいでしょうか？情報量が足りず解答していただくのは難しい、ですよね。無知で申し訳ないです。もう少し自力で入力してから再度質問させていただければと思います。

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

回答1件

ベストアンサー

例えばこんな感じでしょうか。

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <style>
6      @keyframes fadeIn {
7        to { opacity: 1; }
8      }
9      .c1, .c2, .c3, .c4, .c5, .c6 {
10        opacity: 0;
11        animation: 2.0s linear forwards fadeIn;
12      }
13      .c1 { animation-delay: 0.0s; }
14      .c2 { animation-delay: 0.5s; }
15      .c3 { animation-delay: 1.0s; }
16      .c4 { animation-delay: 1.5s; }
17      .c5 { animation-delay: 2.0s; }
18      .c6 { animation-delay: 2.5s; }
19    </style>
20  </head>
21  <body>
22    <div class="slidebox">
23      <p class="toptext">
24        <span class="c1">文</span>
25        <span class="c2">字</span>
26        <span class="c3">文</span>
27        <span class="c4">字</span>
28        <span class="c5">文</span>
29        <span class="c6">字</span>
30      </p>
31    </div>
32  </body>
33</html>