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

更新日 : 2021.04.04

Share
0
12
2

フェードインアニメーションを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. いざという時に使える13のHTML&CSS Tips集の画像

    いざという時に使える13のHTML&CSS Tips集

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

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

  4. 見出しをおしゃれにする英字フォントの画像

    【無料】見出しをおしゃれにする英字フォントを19個集めてみた

  5. 見出しに使えるfit-contentを解説してみる