文字列を同じ位置で交互に変えていく動作を実現したい

Question

cssのkeyfremesを利用して、文字が交互に変わっていくものを作りました。

<div class="change">
   <span class="word1">空気</span><span class="word2">水</span>を変える
</div>

            @keyframes fade_out {
                0% { opacity: 1; }
                50% { opacity: 0; }
                100% { opacity : 1;}
            }

            @keyframes fade_in {
                0% { opacity: 0; }
                50% { opacity: 1; }
                100% { opacity : 0;}
            }

.change {
            font-size: 25px;

            .word1 {
                display: inline-block;
                position: relative ;
                font-size: 30px;
                animation: fade_out 10s ease-in-out infinite normal forwards ;
            }

            .word2 {
                    display: inline-block;
                    position: absolute;
                    font-size: 40px;
                    top: 50%;
                    left : 20% ;
                    text-align: center;
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    animation: fade_in 10s ease-in-out infinite normal forwards ;
            }
        }

問題点として、word1とword2が同じ位置にならないことです。
現在word2の位置を 「left : 20%」という数値でword1の中央に重ねようとしてますが、出来ていないです。
pxで指定しても良いですが、フォントサイズも変えるかもしれないし、%だと画面のサイズが変わればどうしてもズレてしまいます。

どうやったらword1とword2が同じ位置で重ねられるでしょうか？

また、この書き方以外にも別のやり方があるとか、javascriptで実現できるとかあれば教えていただきたいです。

Answer 1

兄弟要素であるword1とword2において、word2をposition: absolute;で中央に配置しようとすると、word1の幅に応じて目視で調整する必要がでてきます。

そこで、word2 を word1 の子要素にすれば、word1 を基準に配置できますので、自動で中央配置にできます。
中央配置はflexレイアウト(あるいはgridレイアウト)を使うとシンプルにできます。

フェイドアニメーションは、opacityで透明度を変更すると子要素まで影響しますので、rgbaで文字色の透明度を変更するといいでしょう。

<div class="change">
   <span class="word1">空気<span class="word2">水</span></span>を変える
</div>

@keyframes fade_in_out {
  0% {
    color: rgba(0,0,0,0);
  }
  50% {
    color: rgba(0,0,0,1);
  }
  100% {
    color: rgba(0,0,0,0);
  }
}

.change {
  font-size: 25px;
  
  .word1 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 30px;
    animation: fade_in_out 10s -5s ease-in-out infinite normal forwards;
  }

  .word2 {
    font-size: 40px;
    position: absolute;
    animation: fade_in_out 10s 0s ease-in-out infinite normal forwards;
  }
}

CodePen サンプル

Comments

[nekko_neko]

ありがとうございます。
一度、word2をword1の子要素にしていたのですが、それこそ透明度の問題で諦めてました。colorでのやり方があるんですね、勉強になりました！

Answer 2

• positionの関係性を理解すれば解決できそうではないでしょうか。
  • 参考）https://saruwakakun.com/html-css/basic/relative-absolute-fixed
• .word2 の位置が目検で良ければ、「em」を使って見ると良いかもしれません。
• font-size は揃えましょう。

例）
.word2 {
  display: inline-block;
  position: absolute;
  top: ; // .word1 の位置関係との兼ね合い
  left: 0.7em; // font-size との兼ね合い
  font-size: 40px; // .word1 or .word2 どちらかに揃える
  text-align: center;
  animation: fade_in 10s ease-in-out infinite normal forwards;
}
コード

Comments

[nekko_neko]

ありがとうございます。

文字サイズの件に関してですが、出来ればword2の方を大きくしたいと考えています。それでは難しいのでしょうか？

[退会済みユーザー]

＞大きくしたい
であれば、font-size はそのままでも良いと　思います。