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

公開日: 2022.01.31
更新日: 2024.01.06
fadein・fadeoutアニメーションを作る方法

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

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

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

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

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

  • animationプロパティの基本的な使い方
  • @keyframesの基本的な使い方
  • fadein・fadeoutアニメーションの作り方
  • fadein以外の様々なアニメーションの実装方法

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

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

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

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

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

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

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(フェードアウト)アニメーションを作る方法を解説しました。

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

  • フェードイン・フェードアウトアニメーションは2つのブロックで構成されている
  • 速さや時間、回数などはanimationプロパティでコントロールする
  • アニメーション本体の変化は@keyframesでコントロールする

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

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


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

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

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

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

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

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5