メインビジュアルに合うフェードインアニメーションを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. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選