【WordPress】「CSS」だけでフェードイン・フェードアップの「アニメーション」を設定してみた！

2023/02/26

CSSだけで簡単にできる、フェードインとフェードアウトアニメーションの設定方法をまとめてみました。

「fadeUp」（フェードアップ）

フェードアップの「HTML」

アニメーションを動作させたいパーツにクラスを設定します。

<div class="fade_up"></div>

フェードアップの「CSS」

「fadeInAnime」というアニメーションを設定し、下から規定のポジションまで上がってくるアニメーションを指定しています。
ここでは、「40px」下からから上がるようになっています。

/* ヘッダーの遅延読み込み */
.fade_up {
	animation-name: fadeUpAnime;
	animation-delay: 1s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

「fadeDown」（フェードダウン）

フェードダウンの「HTML」

アニメーションを動作させたいパーツにクラスを設定します。

<div class="fade_down"></div>

フェードダウンの「CSS」

「fadeDownAnime」というアニメーションを設定し、上から規定のポジションまで降りてくるアニメーションを指定しています。
ここでは、「40px」上から降りてくるようになっています。

/* ヘッダーの遅延読み込み */
.fade_down {
	animation-name: fadeDownAnime;
	animation-delay: 1s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

よかったらシェアしてね！