ふわっと表示させる文を3つ順番に同位置に表示させたいです

ふわっと表示させる文を3つ順番に同位置に表示させたいです。

今は2つが同じタイミングで表示されてしまっているので、3つバラバラに「hogehoegをふわっと表示」→「ふわっと消える」→「ほげほげをふわっと表示」→「ふわっと消える」→「あああああをふわっと表示」→「ふわっと消える」→「最初に戻る」をしたいです。（同じ位置に）

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10
11    <link rel="stylesheet" href="style.css">
12    <title>Title</title>
13
14
15  </head>
16  <body>
17    <div class="container-fluid">
18        <div class="relative">
19          <div class="col-xs-12 cover-img" style="background-image:url('img/background.jpg');">          
20            <figure class="cover-text text-center">
21              <figcaption class="catch-copy fadein1">
22                <p class="h2">
23                  hogehoehogehogeho hogehogehoge
24                </p>
25              </figcaption>
26              <figcaption class="catch-copy-2 fadein2">
27                <p class="h2">
28                  ほげほげほげほげほげほげほげげほげほげほげ
29                </p>
30              </figcaption>
31              <figcaption class="catch-copy-3 fadein3">
32                <p class="h2">
33                  ああああああああああああああああああああ
34                </p>
35              </figcaption>
36            </figure>
37          </div>
38        </div>
39      </div>
40    </div>
41
42    <!-- Optional JavaScript -->
43    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
44    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
45    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
46    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
47  
48    
49
50  
51  </body>
52</html>
53

CSS
1/* ふわっとヘッダー文字を表示させ切り替える時のCSS */
2.fadein1 {
3  animation: fadein 3s ease-in-out infinite alternate both;
4}
5.fadein2 {
6  animation: fadein 3s ease-in-out 3s infinite alternate both;
7}
8.fadein3 {
9  animation: fadein 3s ease-in-out 3s infinite alternate both;
10}
11
12
13.fadein.scrollin {
14  opacity: 1;
15  transform: translate(0, 0);
16}
17
18@keyframes fadein {
19  0%{
20    opacity: 0;
21  }
22  20%{
23    opacity: 0;
24  }
25  }

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

回答2件

ベストアンサー

まず３つのテキストを同じ位置に表示させるには、position: absolute;で位置を固定させます。

アニメーションを順番にずらして発生させるには、animation-delay で発動する時間を少しづつ遅らせます。

animation: fadein 3s ease-in-out 3s infinite alternate both;
だと、ease-in-out の後の 3s がanimation-delayですので発動を3秒遅らせるという意味になります。３つめのテキストのものはそれよりもっと遅らせればいいでしょう。

また、ease-in-out の前の3sは、アニメーション継続時間ですがこれをアニメーションが３つになるので長くする必要がありますね。

CodePenサンプル

投稿2020/10/21 13:57

hatena19

総合スコア34075

Larkiwing

2020/10/21 14:06

hatena19さん毎度ありがとうございます。無事解決しました。('◇')ゞ

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

こんばんは。

こんなかんじでしょうか。

サンプル

css
1/* ふわっとヘッダー文字を表示させ切り替える時のCSS */
2.fadein1 {
3  animation: fadein 3s ease-in-out -2s infinite alternate both;
4  position:absolute;
5}
6.fadein2 {
7  animation: fadein 3s ease-in-out 0s infinite alternate both;
8  position:absolute;
9}
10.fadein3 {
11  animation: fadein 3s ease-in-out 2s infinite alternate both;
12  position:absolute;
13}
14
15@keyframes fadein {
16  0%{
17    opacity: 0;
18  }
19  66%{
20    opacity: 0;
21  }
22  }