CSSだけ！fadein（フェードイン）・fadeout（フェードアウト）アニメーションを作る方法

ふわっと出てきたり、消えたりするアニメーションは、ページ全体やメニューバーなど、様々な場面で使用されています。

しかし、実はCSSだけで実装することも可能！

JavaScriptやjQueryが使えない初心者でも、簡単にフェードイン・フェードアウトアニメーションが実装できるのです。

そこで今回は、CSSだけでfadein（フェードイン）・fadeout（フェードアウト）アニメーションを作る方法を解説します。

この記事を読んでわかる内容は、以下の通りです。

基本的なフェードイン・フェードアウトアニメーションの作り方だけでなく、様々な角度からの登場するアニメーションも解説します。

初心者の方はもちろん、CSSの幅やアニメーション技術を磨きたい中級者の方にもおすすめの内容ですよ。

CSSでfadein（フェードイン）、fadeout（フェードアウト）アニメーションをつける方法

CSSでfadein・fadeoutアニメーションを作るには、以下の2ブロックが必要です。

それぞれのブロックの役割と、具体的な記述方法を解説していきます。

1.animationプロパティのブロック

animationプロパティは、アニメーションの速さや時間、回数などをコントロールするブロック。

具体的には、以下のプロパティを指定することができます。

プロパティ名	指定できるもの
animation-name	使うアニメーションの名前
animation-delay	アニメーションの開始のタイミング
animation-fill-mode	アニメーションが始まる前と終わった後の状態
animation-play-state	アニメーションの再生や停止
animation-iteration-count	アニメーションの繰り返す回数
animation-duration	アニメーションの進行度合い
animation-direction	アニメーションの再生方向
animation-timing-function	アニメーション進行スピード
animation	上記のプロパティーをまとめて

2.@keyframesのブロック

@keyframesは、色や形、場所、透明度、大きさなど、アニメーション本体の変化をコントロールできるブロック。

具体的には、以下のプロパティを指定することができます。

プロパティ名	指定できるもの
opacity	要素の透明度
translate	要素の上下左右の位置

アニメーション開始時の状態と、アニメーション終了時の状態は、以下のように「0%」と「100％」で記述します。

@keyframes クラス名 {
   0% {
      /* アニメーション開始時の指定 */
   }
   100% {
      /* アニメーション終了時の指定 */
   }
}

実際にfadein（フェードイン）アニメーションを作ってみよう！

では、実際にfadeinアニメーションを作ってみましょう！

今回は、以下のコードを基準に具体的な方法を紹介します。

<!-- HTMLコード -->

<div class="bg">
  <h1 class="fadein">fadein（フェードイン）アニメーション</h1>
</div>

/* CSSコード */
.bg {
  background: url(../img/test_img.jpg) no-repeat center / cover;
  position: relative;
  height: 500px;
}

.bg::before {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

.fadein {
  position: absolute;
  top: 45%;
  left: 20%;
  color: rgb(255, 255, 255);
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

▼フェードインアニメーション実施後のブラウザ表示▼

1.上から下に

@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateY(0);
  }
  100% {
     opacity: 1;
     transform: translateY(20px);
  }
}

2.下から上に

@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateY(20px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}

3.左から右に

@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateX(0);
  }
  100% {
     opacity: 1;
     transform: translateX(20px);
  }
}

4.右から左に

@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateX(20px);
  }
  100% {
     opacity: 1;
     transform: translateX(0);
  }
}

fadeout（フェードアウト）アニメーションにも挑戦してみよう！

では、実際にfadeoutアニメーションを作ってみましょう！

今回は、以下のコードを基準に具体的な方法を紹介します。

<!-- HTMLコード -->
<div class="bg">
  <h1 class="fadein">fadein（フェードイン）アニメーション</h1>
</div>

/* CSSコード */
.bg {
  background: url(../img/test_img.jpg) no-repeat center / cover;
  position: relative;
  height: 500px;
}

.bg::before {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

.fadein {
  position: absolute;
  top: 45%;
  left: 20%;
  color: rgb(255, 255, 255);
  animation-name: fadeout;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

▼フェードアウトアニメーション実施後のブラウザ表示▼

1.上から下に

@keyframes fadeout {
  0% {
     opacity: 1;
     transform: translateY(0);
  }
  100% {
     opacity: 0;
     transform: translateY(20px);
  }
}

2.下から上に

@keyframes fadeout {
  0% {
     opacity: 1;
     transform: translateY(0);
  }
  100% {
     opacity: 0;
     transform: translateY(-20px);
  }
}

3.左から右に

@keyframes fadeout {
  0% {
     opacity: 1;
     transform: translateX(0);
  }
  100% {
     opacity: 0;
     transform: translateX(20px);
  }
}

4.右から左に

@keyframes fadeout {
  0% {
     opacity: 1;
     transform: translateX(0);
  }
  100% {
     opacity: 0;
     transform: translateX(-20px);
  }
}

CSSだけで作れるアニメーションはfadein（フェードイン）だけじゃない！

CSSでは、fadeinやfadeout以外にも、様々なアニメーションを作ることが可能です。

ここでは、今回ご紹介したfadeinやfadeoutに似ているアニメーションを4つ紹介します。

以下は、基礎となるコードです。

<!-- HTMLコード -->
<div class="bg">
  <h1 class="fadein">fadein（フェードイン）アニメーション</h1>
</div>

/* CSSコード */
.bg {
  background: url(../img/test_img.jpg) no-repeat center / cover;
  position: relative;
  height: 500px;
}

.bg::before {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

.fadein {
  position: absolute;
  top: 45%;
  left: 20%;
  color: rgb(255, 255, 255);
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

1.スライドイン

@keyframes fadein {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

2.スライドアップしながらフェードイン

@keyframes fadein {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

3.斜めスライドイン

@keyframes fadein {
  0% {
    transform: translate(180px,30px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}

4.ズームイン

@keyframes fadein {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

CSSだけで様々なアニメーションが作れる！fadeinとfadeoutにも挑戦してみよう

今回は、CSSだけでfadein（フェードイン）・fadeout（フェードアウト）アニメーションを作る方法を解説しました。

以下は、この記事のまとめです。

animationと@keyframesを使いこなせば、様々な角度からのフェードイン・フェードアウトアニメーションが実装できるようになります。

フェードイン・フェードアウトだけでなく、様々なCSSアニメーションに挑戦してみましょう！

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！