【CSS】テキストを順番にフェードインするアニメーション

2023/07/07 6836

この記事を書いている人

Marie

フリーランスwebデザイナー＆講師
制作会社・インハウスデザイナーを経験し独立
オンラインwebデザイン教室ちいウェブ運営
仕事の合間の息抜きに植物を育てています♡
スプラ・DIY・将棋がすき
小4・年長の母

もっと詳しくみる

“テキストを1行ごとにフェードインで表示させたい”という質問をいただいたので、アニメーションのコードを作ってみました。

[目次]

1 完成イメージ
2 HTML
3 CSS
4 使用する場合は、画面内に入ってから

完成イメージ

まずは完成例からご覧ください。

（動いてない場合はリロードして再度見てみてください）

泣かぬなら　　「今は泣きたく　　　ないんだ　ね…」

こんな感じで、時間差で各行を表示させたい時に書くCSSアニメーションです。

使用しているのは、opacityとtransform:translateY()の簡単に作れるアニメーションです。

HTML

<p class="catch_copy">
 <span>泣かぬなら</span>
 <span>「今は泣きたく</span>
 <span>ないんだ</span>
 <span>ね...」</span>
</p>

文章内での改行ということで、<span>で括りました。

<span>にclassをつけても良いですが、今回は擬似クラスを使用して指定します。

では、CSSを見てみましょう。

CSS

同一アニメーションで対応するので、@keyframes記述は一度でOKです。

.catch_copy span {
  transition: 1s;
  opacity: 0;
  transform: translateY(20px);
  display: block;
}
.catch_copy span:first-child {
  animation: catch_anime 1.4s forwards 1s;　
}
.catch_copy span:nth-child(2) {
  animation: catch_anime 1.4s forwards 2s;
}
.catch_copy span:nth-child(3) {
  animation: catch_anime 1.4s forwards 3s;
}
.catch_copy span:nth-child(4) {
  animation: catch_anime 1.4s forwards 4s;
}

@keyframes catch_anime {
  0% {
    transform: translateY(20px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}

まず、全ての<span>に、transform: translateY(20px);をつけることで、最初の位置を下に20px下げています。

アニメーションの完了時にtransform: translateY(0);で元の位置に戻しているので、上に動くような仕組みになっています。

animation: catch_anime 1.4s forwards;までは共通で、異なるのはその後の数字です。

それぞれ、1s , 2s , 3s, 4sとなっています。

こちらは、アニメーションを開始するまでの時間です。

開始時間をずらして全く同じアニメーションを実行したい場合は、こんな風に指定できます。

アニメーション（@keyframes）を行数分作成しなくても良いのです。