メインビジュアルに合うフェードインアニメーションをCSSで実装する

更新日 : 2021.04.04

Share

フェードインアニメーションをCSSのみで実装する方法です。アニメーションを発火させるタイミングの調整ができないので、ヘッダーやメインビジュアルといったファーストビューに使える方法になります。

See the Pen
Fade-in Animation
by Kobayashi (@Pulp_Kobayashi)
on CodePen.

h1 {
	position: absolute;
	top: 30px;
	animation: 0.4s fadeinlogo 0.9s forwards;
	opacity: 0;
}
@keyframes fadeinlogo {
	0% {
		left: 20px;
  }
	100% {
		left: 30px;
		opacity: 1;
  }
}
button {
	position: absolute;
	right: 30px;
	animation: 0.4s fadeinbtn 1.6s forwards;
	opacity: 0;
}
@keyframes fadeinbtn {
	0% {
		top: 20px;
  }
	100% {
		top: 30px;
		opacity: 1;
  }
}
p {
	position: absolute;
	right: 100px;
	animation: 0.3s fadeintxt 2.3s linear forwards;
	opacity: 0;
}
@keyframes fadeintxt {
	0% {
		bottom: 20px;
  }
	100% {
		bottom: 30px;
		opacity: 1;
  }
}

デモでは3つの要素をフェードインさせています。
どれも10px移動しながら透明度を0→1にアニメーションさせています。

animationをショートハンドで記述してありますが、これを分解したのが以下です。

h1 {
	animation-duration: 0.4s;
	animation-name: fadeinlogo;
	animation-delay: 0.9s;
	animation-fill-mode: forwards;
}
animation-duration
アニメーションが完了するまでの時間。0.4sは0.4秒をかけてアニメーションさせます。
animation-name
@keyframesで定義したキーフレームを指定。@keyframes規則名とanimation-nameを同じfadeinlogoにすることで@keyframesで指定したアニメーションの中間ステップを適用させます。
animation-delay
アニメーションの開始タイミングの指定。0.9sで0.9秒後にアニメーションを開始させます。
animation-fill-mode
アニメーション前後のスタイルをどのように適用するかを設定。forwardsでアニメーション後も@keyframesの100%で指定したスタイルを保持します。

人気記事

  1. Chrome拡張機能を見直してみた

    便利なChrome拡張機能を見直してみた

  2. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  3. 著書「現場で使えるWebデザインアイデアレシピ」を執筆しましたの画像

    著書「現場で使えるWebデザインアイデアレシピ」を執筆しました

  4. 2022年版 Web制作が捗るChrome拡張機能14選

    2022年版 Web制作が捗るChrome拡張機能14選

  5. 2021年を振り返る!Web制作関連の人気記事をあつめてみた