CSSアニメーションで遅延表示させる方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSアニメーションで遅延表示する方法をご紹介します。

ページを読み込んだ際に、一部の要素だけ１秒ほどかけてフワッと表示されるアニメーション、ご覧になったことありますでしょうか？

コーポレートサイトのヒーローエリアなどでよく目にするアニメーションです。

他のテキストとは区別したいメッセージなどに使用することでメッセージ性を強調することができます。

サンプルと共に実装方法を紹介していきますので参考になれば幸いです。

それでは見て参りましょう！

CSSアニメーションで遅延表示させてみよう！
- 実装のポイント
- サンプル
まとめ

CSSアニメーションで遅延表示させてみよう！

実装のポイント

今回の実装のポイントは、

@keyframesでアニメーションを作成する
遅延表示させるテキストは初期状態では非表示（opacity:0）にしておく
アニメーション開始（0%）のときはopacity:0、終了時(100%)はopacity:1と指定することで徐々に要素が表示されるアニメーションを実現する
animationプロパティを用いて@keyframesで作成したアニメーション、変化の仕方、何秒くらいかけてアニメーションさせるかを指定する

となります。

コードを見ながら確認していきましょう。

今回のHTML

index.html

<div class="Item">
  メッセージ
</div>

HTMLはめちゃくちゃシンプルです笑

CSS

index.css

.Item{
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
  background: #5bc8ac;
  color: #fff;
  opacity: 0;
  
  /* アニメーション */
  animation: fadeIn 2s linear;
  animation-fill-mode: both;
}
/* ---------------------------- */
/* --- Animation --- */
/* ---------------------------- */
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

animation: fadeIn 2s linearは、「fadeInアニメーションを一定速度で2秒間かけて実行する」という意味になります。

linearは、アニメーションの変化の仕方で「一定速度で実行する」ものです。

サンプル

以下、遅延表示アニメーションのサンプルです！

※Returnボタンを押すとアニメーションされます。

See the Pen
LYEoRMv by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、CSSアニメーションで遅延表示させる方法をご紹介しました。

Javascriptを使わなくてもCSSアニメーションで滑らか動きを実装することができるのが面白いですよね！

最後までご高覧いただきありがとうございました！