webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

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

この記事を書いている人
Marie

Marie

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

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

完成イメージ

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

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

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

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

使用しているのは、opacitytransform: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)を行数分作成しなくても良いのです。

使用する場合は、画面内に入ってから

ちなみに念の為に書いておきます。

画面内に入ってからこのアニメーションを実行しないと、まだ見えてない間に終わってしまうことになります。

実行したい場所がファーストビューの場合は、このまま使えると思います。

画面内に入ったかどうかは、Javascript・jQueryなどで判定し、class追加が一般的です。

それについては、 こちらの記事に方法を書いていますのでご覧ください。

↑目次3,要素が画面内に入ったらclassを付与するをご覧ください。

.catch_copy.active span:first-childなど、付与classに対してアニメーションをかけてください。

ぜひ試してみてください〜

いいなと思ったら
TAPしてね♡↓

合わせて読んでほしい記事

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード 【CSS】テキストを順番にフェードインするアニメーション

関連記事

更新通知を受け取る

不定期更新の為、更新お知らせを受け取りたい方は
ご登録ください^^

更新通知以外のメールは
お送りしませんのでご安心ください。